我就廢話不多說了，大家還是直接看程式碼吧~

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const createRouter = () => new Router({
 mode: 'history',routes: []
})

const router = createRouter()

export function resetRouter () {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher // the relevant part
}

export default router

找老外的文件解決的問題，在登出的模組呼叫resetRouter方法，把原來的路由替換。

補充知識：vue中 做許可權管理 使用router.addRoutes()動態新增路由以及解決重新整理失效，跳轉後重新整理失效問題

最近在公司做知識儲備，有個許可權的問題干擾了我2天，今天終於把他理順了！！！

一、需求明確

我想做的是後臺管理系統的許可權管理，（所有的資料都是使用mockJs模擬得來），登入的時候，傳送表單驗證，驗證成功後，後臺返回許可權列表，許可權不同，返回的列表不同，拿到許可權列表後，把許可權列表渲染出來在頁面側邊欄上。

二、注意點

（1） 前端提前設定靜態的許可權列表，通常只包括頁面公共的部分，比如 login。

（2）前端提前定義所有的許可權列表，將其定義為一個數組，該陣列中包含所有的許可權。

（3）後臺返回的資料是該使用者擁有的所有許可權列表，一般寫成路由形式，但只包含name即可，如：

{
  "code": 0,"message": "獲取許可權成功","data": [
    {
      "name": "訂單管理","children": [
        {
          "name": "訂單列表"
        },{
          "name": "生產管理","children": [
            {
              "name": "生產列表"
            }           
          ]
        },{
          "name": "退貨管理"
        }
      ]
    }
  ]
}

三、思路與實現

（1）當用戶點選登入的時候，驗證成功後，可以獲取當前使用者的id（token）儲存到sessionStorage中。

（2）根據 '後臺返回的許可權列表（getList）'，去比對 '我們提前定義好的許可權列表（powerList）'，然後得出 '應該動態新增的許可權列表（list）' ，並存放到vuex中，最後執行addRoutes把比對出來的許可權路由列表動態新增到路由中即可。

（3）進入home頁面，渲染側邊欄。

四、問題

（1）vuex中資料儲存在記憶體中，重新整理後失效需要重新獲取。因此會出現動態頁面失效問題。我們需要根據是否為重新整理頁面來重新載入即可。

（2）進入動態載入的頁面，然後再重新整理，也會出現上面的情況

五、解決方法

在router的全域性導航守衛beforeEach中設定，根據vuex中是否有list 來判斷是否為重新整理頁面，如果有那麼是第一次登陸， 如果沒有，那麼就為重新整理頁面，需要重新執行即可。

getRoutes就是執行路由對比，然後執行addRoutes的函式，因為其中有獲取後臺的路由列表這一步，為非同步操作，所以應該放在action中

以上這篇vue 解決addRoutes多次新增路由重複的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。