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) => {3     state.addRoutes = routes;4     state.routes = constantRoutes.concat(routes);5   },6   RESET_ROUTES: (state, payLoad) => {7     state.addRoutes = [];8     state.routes = [];9   }
10 };

generateRoutes({ commit }, roles) {2     return new Promise(resolve => {3       // 关键代码 == 添加路由前将路由重置为空4       commit("RESET_ROUTES");5       // 设置登录的路由权限6       let accessedRoutes;7    8      if (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     });

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

VUE动态路由下刷新丢失路由的解决方法
目前在使用VUE3.X开发,发现加载动态路由的话,由于刷新页面就会重新加载VUEX,故会丢失已存在的state,但是又不想localStorage,sessionStorage. 经过多次试验,采取在 ...
Vue动态路由的前端实现
1. 需求描述最近开发的一个项目,涉及到这样一个需求:随着项目的不断推进,后台管理功能逐渐增多,与此同时,静态路由表也逐渐扩大,需要把静态路由方式转换为动态路由方式.要完成这样一个转换,有几个技术要 ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
vue动态路由刷新丢失解决方案
问题出现的问题动态路由添加刷新页面出现空白页面或者404页面因为界面刷新导致动态路由丢失,所以是空页面或者404 我添加动态路由了怎么还剩刷新依旧是空白页面呢? 因为动态路由添加后需要是新导航才会 ...
vue动态路由刷新匹配错误问题以及解决办法
目录一.了解动态路由二.解决问题结论一.了解动态路由我这里说的动态路由指的是,由后端提供当前角色可以访问的所有路径,前端提前写好路径与组件之间的映射也就是route,然后根据后端返回的u ...
vue动态路由刷新白屏问题解决方法
出现刷新白屏的问题原因很好理解,就是由于加载了动态路由,刷新后动态路由消失,所以就出现了白屏问题,解决方式是判断在刷新的时候重新添加动态路由就行了.(参考大神的经验,最终解决了我的问题,感谢...) ...
vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...
vue动态路由权限管理
通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了. 动态路由设置一般有两种: (1).简单的角色路由设置:比如只涉及到管理员和普通用户 ...

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

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

最新文章

热门文章