本文共 1597 字，大约阅读时间需要 5 分钟。

vue-router路由

狂神视频教程

第一步 使用vue-cli搭建vue程序 搭建一个vue-cli 脚手架完整包 （步骤一样，本示例将 名称调整为myvue02router ）

狂神步骤截图

示例步骤

执行 install vue-router

C:\workspace\workspace_front\vue\vue狂神\myvue02router>cnpm install vue-router --save-dev

step1 删除 component 目录下HelloWorld 相关内容删除

1.component 目录下HelloWorld.vue

step2 component 目录下方 自定义组件

step3 定义 main 及 content01

main.vue

content01.vue

step4 编写 router/index.js 路由表文件

import Vue from 'vue'import VueRouter from 'vue-router'import Main from '../components/main'import Content01 from '../components/content01'//安装路由Vue.use(VueRouter);//配置导出路由export default  new VueRouter({     routes:[    {         path: '/content01',   //路由路径      name: 'content01',      component: Content01    //跳转的组件      },    {         path: '/main',   //路由路径      name: 'main',      component: Main    //跳转的组件    }    ]});

step5 main.js 中配置路由

import Vue from 'vue'import App from './App'//import VueRouter from 'vue-router'    //router/index.js   中有 import VueRouter from 'vue-router' ，所以此处注释import router from './router'    //自动扫描文件夹下的路由配置,默认找router/index.js 文件Vue.config.productionTip = false//显示声明使用VueRouter//Vue.use(VueRouter)    //router/index.js   中有 Vue.use(VueRouter); ，所以此处注释new Vue({     el: '#app',  router,      //配置路由  components: {    App },  template: '
   '})

app.vue 中使用路由

效果