1.使用router.addRoutes(teacherRouter);添加完路由切换路由时,vue会警告路由名字重复
问题出现原因是:动态路由添加时调佣addRoutes();它只会帮你注入路由,不会帮你把前面的路由清掉。如此一来就重复添加了。
解决方法:路由动态添加关键页面需要在路由配置页(router/index.js)添加自定义方法
router.$addRoutes = params => {router.matcher = new Router({routes: router.options.routes// 关键代码}).matcher;router.addRoutes(params);};
2.问题:在添加后进行页面刷新后,动态添加的路由会消失,路劲找不到
可以使用localstorage缓存,页面路由权限判断页(promission.js)用了路由beforeEach可以直接判断路由刷新:
if (from.name === null) {// 刷新router.$addRoutes(accessRoutes);// 确保页面加载完成next({ ...to, replace: true });}
3.问题:切换不同角色权限,之前动态添加的路由没有被清除,进入看到的还是上次进入的权限页面。
问题在于vue的store没有被清空,把store里的route清空就行:
可以在退出登录设置,也可以在添加路由时清空,以下代码为store内permission.js添加动态路由前清空路由
1 const mutations = {2 SET_ROUTES: (state, routes) => {3state.addRoutes = routes;4state.routes = constantRoutes.concat(routes);5 },6 RESET_ROUTES: (state, payLoad) => {7state.addRoutes = [];8state.routes = [];9 }10 };
generateRoutes({ commit }, roles) {2return new Promise(resolve => {3 // 关键代码 == 添加路由前将路由重置为空4 commit("RESET_ROUTES");5 // 设置登录的路由权限6 let accessedRoutes;7 8if (roles === 4) {9 // 教师登录10 accessedRoutes = teacherRouter;11 }12 if (roles === 3) {13 // 学生登录14 accessedRoutes = studentRouter;15 }16 17 commit("SET_ROUTES", accessedRoutes);18 resolve(accessedRoutes);19});