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

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

找老外的文檔解決的問題，在登出的模塊調(diào)用resetRouter方法，把原來的路由替換。

補充知識：vue中 做權(quán)限管理 使用router.addRoutes()動態(tài)添加路由以及解決刷新失效，跳轉(zhuǎn)后刷新失效問題

最近在公司做知識儲備，有個權(quán)限的問題干擾了我2天，今天終于把他理順了?。。?/p>

一、需求明確

我想做的是后臺管理系統(tǒng)的權(quán)限管理，（所有的數(shù)據(jù)都是使用mockJs模擬得來），登錄的時候，發(fā)送表單驗證，驗證成功后，后臺返回權(quán)限列表，權(quán)限不同，返回的列表不同，拿到權(quán)限列表后，把權(quán)限列表渲染出來在頁面?zhèn)冗厵谏稀?/p>

二、注意點

（1） 前端提前設(shè)置靜態(tài)的權(quán)限列表，通常只包括頁面公共的部分，比如 login。

（2）前端提前定義所有的權(quán)限列表，將其定義為一個數(shù)組，該數(shù)組中包含所有的權(quán)限。

（3）后臺返回的數(shù)據(jù)是該用戶擁有的所有權(quán)限列表，一般寫成路由形式，但只包含name即可，如：

{ 'code': 0, 'message': '獲取權(quán)限成功', 'data': [ { 'name': '訂單管理', 'children': [{ 'name': '訂單列表'},{ 'name': '生產(chǎn)管理', 'children': [ { 'name': '生產(chǎn)列表' } ]},{ 'name': '退貨管理'} ] } ]}

三、思路與實現(xiàn)

（1）當(dāng)用戶點擊登錄的時候，驗證成功后，可以獲取當(dāng)前用戶的id（token）存儲到sessionStorage中。

（2）根據(jù) ’后臺返回的權(quán)限列表（getList）’，去比對 ’我們提前定義好的權(quán)限列表（powerList）’，然后得出 ’應(yīng)該動態(tài)添加的權(quán)限列表（list）’ ，并存放到vuex中，最后執(zhí)行addRoutes把比對出來的權(quán)限路由列表動態(tài)添加到路由中即可。

（3）進入home頁面，渲染側(cè)邊欄。

四、問題

（1）vuex中數(shù)據(jù)存儲在內(nèi)存中，刷新后失效需要重新獲取。因此會出現(xiàn)動態(tài)頁面失效問題。我們需要根據(jù)是否為刷新頁面來重新加載即可。

（2）進入動態(tài)加載的頁面，然后再刷新，也會出現(xiàn)上面的情況

五、解決方法

在router的全局導(dǎo)航守衛(wèi)beforeEach中設(shè)置，根據(jù)vuex中是否有l(wèi)ist 來判斷是否為刷新頁面，如果有那么是第一次登陸， 如果沒有，那么就為刷新頁面，需要重新執(zhí)行即可。

getRoutes就是執(zhí)行路由對比，然后執(zhí)行addRoutes的函數(shù)，因為其中有獲取后臺的路由列表這一步，為異步操作，所以應(yīng)該放在action中

以上這篇vue 解決addRoutes多次添加路由重復(fù)的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。