vue全家桶的使用、＜router-view＞、router、view、vueX、嵌套路由、子路由、动态路由、路由拦截、路由守卫、elementUi、SPA

1、关键代码（router/index.js）文件

import Vue from 'vue'; import VueRouter from 'vue-router'; import ContainerPage from '@/view/containerPage/index'; import PageA from "@/view/pagea/index"; import PageB from "@/view/pageb/index"; import PageC from "@/view/pagec/index"; Vue.use(VueRouter); const routes = [ { path: '/', redirect: '/containerPage' }, { path: '/containerPage', name: "containerPage", component: ContainerPage, children: [ { path: '/containerPage', redirect: '/containerPage/pagea' }, { id: 1, path: 'pagea', name: 'pagea', class: "el-icon-menu", component: PageA, title: "页面A" }, { id: 2, path: 'pageb', name: 'pageb', class: "el-icon-document", component: PageB, title: "页面B" }, { id: 3, path: 'pagec', name: 'pagec', class: "el-icon-setting", component: PageC, title: "页面C" } ] }, ]; export default new VueRouter({ routes }); 

2、完整代码

gitee（码云）develop分支vueFamilybucket文件夹