vue動態添加路由，跳轉頁面時，頁面報錯路由重復：vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }

之前用了一個vue-element-admin做了一個小項目，里面用到了動態添加路由，動態展示側邊欄，

當我切換頁面時，控制台總是警告提示路由重復，連續跳轉幾次頁面后，控制台就被這些警告占滿了，

 

 

於是處理一下

原因addRoutes 方法僅僅是幫你注入新的路由，並沒有幫你剔除原有的其它路由！

我們先看一下原來代碼

路由攔截器中的代碼：

permission.js:

if (roles) {
        function asyncFun(){
          return new Promise(function(resolve){
              store.dispatch('permission/GenerateRoutes', { roles }).then(() => { // 生成可訪問的路由表
                router.addRoutes(store.getters.routers); // 動態添加可訪問路由表
                router.options.routes=store.getters.routers;
              });
              resolve();
          })
        }
        asyncFun().then(()=>{
          next();
        });
      }

上面 調用的addRoutes()方法是router自帶的原生方法，是動態添加路由的，它並沒有刪除之前路由中原有的路由！！

我們需要在動態添加路由時，清空一下之前的路由，就可以防止報這個錯誤

我們需要添加一個自定義方法，來清空之前的路由，因為這個permission.js中用的router是從router.js中引用進來的，所以要在router.js中增加這個自定義方法：

router.js中增加如下方法：

router.selfaddRoutes = function (params){
  router.matcher = new Router().matcher;
  router.addRoutes(params)
}

因為router.js最后導出的是router對象。所以我們只需要在這個router對象里加上這個方法即可

 

之后將permission.js中的router.addRoutes替換成router.selfaddRoutes即可