溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章運用簡單易懂的例子給大家介紹vue項目中addRoutes出現添加路由重復如何解決，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
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出現添加路由重復如何解決就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
