Vue 添加动态路由路径重复+刷新页面丢失问题

今天在做一个后端动态路由页面，有公共页面和权限页面，权限有学生权限和教师权限，遇到了动态添加路由的问题。

在动态添加学生或者教师页面的时候，调用addRoutes

router.addRoutes(teacherRouter);

1.添加完动态路由后第一个问题 是：切换路由时，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添加动态路由前清空路由

代码：

 

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes;
    state.routes = constantRoutes.concat(routes);
  },
  RESET_ROUTES: (state, payLoad) => {
    state.addRoutes = [];
    state.routes = [];
  }
};  

generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      // 关键代码 == 添加路由前将路由重置为空
      commit("RESET_ROUTES");
      // 设置登录的路由权限
      let accessedRoutes;
   
     if (roles === 4) {
        // 教师登录
        accessedRoutes = teacherRouter;
      }
      if (roles === 3) {
        // 学生登录
        accessedRoutes = studentRouter;
      }

      commit("SET_ROUTES", accessedRoutes);
      resolve(accessedRoutes);
    }); 

 

 参考链接：https://www.cnblogs.com/imjtzhang/p/13709166.html