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