vue 创建路由

路由
	1、安装
		cnpm install vue-router -S

	2、在创建路由的js中引入
		import Vue from 'vue'
		import VueRouter from 'vue-router'
		Vue.use(VueRouter)

	3、创建路由
		需要创建new 路由实例对象
		const router =/export default new VueRouter({
			routes:[  //不是routers
				{
					path:'',
					name:"",
					component:  //使用前先引入,直接组件名,不加引号

				}
			]
		})

	4、在主入口组件中(App.vue)使用

		<router-view />

	5、在main.js中
		(1)引入路由文件
			import router from './router'
			
		(2)在vue的实例化对象中添加route
		
			new Vue({
			  el: '#app',
			  router,
			  components: { App },
			  template: '<App/>'
			})

代码示例:
main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Axios from 'axios'
import VueRouter from 'vue-router'
import HelloWorld from './components/HelloWorld'

Vue.use(VueRouter)
Vue.config.productionTip = false


const router=new VueRouter({
	routes:[
		{
			path:'/hello',
			name:"HelloWorld",
			component:HelloWorld

		}
	]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
  data()
  {
    return{
      
    }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

来源：CSDN

作者：神奇大叔

链接：https://blog.csdn.net/weixin_43294560/article/details/104339151