const permission = { state: { routers: constRouterMap, addRouters: [] }, mutations: { SET_ROUTERS: (state, routers) => { state.addRouters = routers state.routers = constRouterMap.concat(routers) } }, actions: { GenerateRoutes({ commit }, data) { //略 } } }
3、设置我们的路由文件，这部分放到这里来说，主要因为这里还有个小坑，所以也是特地拿出来和大家分享一下
export const constRouterMap = [ { path: 'https://www.jb51.net/', redirect: '/index', component: BasicLayout, children: [ { path: '/index', name: 'index', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'), meta: { title: '仪表盘' } }, { path: '/home', name: 'home', component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'), meta: { title: '表单页' } }, { path: '/pattern', name: 'pattern', component: () => import(/* webpackChunkName: "pattern" */ '@/views/DesignPattern.vue') }, { path: '/map', name: 'map', component: () => import(/* webpackChunkName: "map" */ '@/views/DataMap.vue'), meta: { title: '地图组件' } }, ] }, { path: '/user', redirect: '/login', component: UserLayout, children: [ { path: '/login', name: 'login', component: () => import(/* webpackChunkName: "login" */ '@/views/user/Login.vue') }, { path: '/register', name: 'register', component: () => import(/* webpackChunkName: "login" */ '@/views/user/Register.vue') } ] }, //需要注意这里，404的路由一定要写在静态路由中 { path: '/404', component: () => import(/* webpackChunkName: "not_found" */ '@/views/NotFound.vue') } ] export const asyncRouterMap = [ { path: 'https://www.jb51.net/', redirect: '/index', component: BasicLayout, children: [ { path: '/controls', name: 'controls', component: () => import(/* webpackChunkName: "controls" */ '@/views/Controls.vue'), meta: { title: '权限设置', permission: ['admin'] } } ] }, //捕获未定义的路由配置 { path: '*', redirect: '/404', hidden: true } ]
上面关于404页面的定义顺序非常重要，如果在静态路由中定义了捕获的路由path:"*"，而在动态路由中定义了404路由的话，则当导航钩子中判断比较复杂的话，会出现一些意想不到的错误，我就是当时写反了顺序，并且还在导航钩子中做了一些复杂的面包屑的判断，一旦刷新页面的话，则会出现以下错误
这种错误的产生，可能是因为刷新时，导航钩子发现动态添加进来的路由找不到一直进行获取动态路由的方法，导致最后调用栈溢出所导致，因此大家在使用的时候一定要非常小心。
4. 当我们生成路由后，退出应用的切换新的角色账号进行登录时，一定要记得的两件事，第一就是清空vuex里面的角色信息，在不刷新的情况下，这些信息是不会丢失的，当不同角色的账号登录时，原来的角色依然存在，那么肯定会出现问题，其次则是在跳转会登录页的时候，需要设置刷新页面的代码
window.location.reload(); this.$router.push({name: 'login'});
先刷新以后再跳转到登录页，这个则是因为addRoutes生成的路由在不刷新的情况下会一直存在，即使下个不同角色的账号登录时，依然会拿之前存在的路由信息去进行过滤，这样过滤的结果必然是当前角色的路由一个都不存在，因此生成的路由信息还是上个角色的路由，所以在完成了之前这些步骤时，一定不要忘记了做这两步，这样也才是一个完整的权限解决方案
尾声
以上也是我在项目中一些收货吧，拿出来和大家分享，也是希望大家少走一些弯路，留心我们开发中遇到的每个看似很小的问题，其实往往是我们最后解决问题的关键，不论是从动态组件还是动态路由，问题的出现也是我们不断去完善自己的过程。