第一步：下载安装vue-router插件 npm/cnpm install vue-router --save

 以下都是在main.js中操作

第二步：在main.js文件中引入插件并且使用

import VueRouter from 'vue-router'

Vue.use(VueRouter)

 

第三步：创建路由组件，在components文件夹中创建任意测试组件，

我创建的是 foo.vue 和bar.vue 然后import引入

 

第四步：配置参数

const routes = [   {path:'/foo',component:foo}  ] 

 

第五步：实例化vueRouter

const router = new VueRouter({ routes})   //第五步中花括号里面的的routes要和第四步定义的同名

 

第六部： 挂载路由

new Vue({ router, render: h => h(App), }).$mount('#app')

 以上都是在main.js中进行操作

接下来转移到App.vue

使用<router-link to="/foo"></router-link> 标签进行导航，to你在main.js里定义的path

加上标签 <router-view></router-view>渲染路由组件（不知道能不能这样说，反正就那意思）

 

附上代码

 App.vue

 

main.js

1 import Vue from 'vue' 2 import App from './App.vue' 3 import VueRouter from 'vue-router' 4 Vue.config.productionTip = false 5  6 Vue.use(VueRouter); 7  8 //1`创建组件 9 import foo from './components/foo.vue'10 import bar from './components/bar.vue'11 //2`配置路由12 const routes = [13   {path: '/foo',component:foo},14   {path: '/bar',component:bar}15 16 ]17 //3`实例化vuerouter18 19 const router = new VueRouter({20   routes21 })22 // 4 挂载23 new Vue({24   router,25   render: h => h(App),26 }).$mount('#app')27 //5根组件的模板中放入routr-view标签