1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue动态路由路径重复以及刷新丢失页面问题

Vue动态路由路径重复以及刷新丢失页面问题

时间:2023-04-19 03:24:12

相关推荐

Vue动态路由路径重复以及刷新丢失页面问题

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});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。