動態新增導航欄時，addRoutes不生效解覺

1、在addroutes前，使用router.options.routes=XXXXX的方法手動新增

2、使用作者的方法，在store裡維護一個routes物件，然後使用這個物件遍歷生成側面導航欄

補充知識：vue-router 動態新增路由 router.addRoutes(routes)遇到的二次登陸路由衝突問題解決

起因

在當前專案中使用的iview-admin,路由要根據許可權動態生成，是在登入後獲取當前使用者許可權內的路由使用 vue-router 的 addRoutes() 方法動態新增到路由表中

遇到的問題

專案目錄

...
router
index.js // 路由主配置，路由守衛等
routers.js // 存放頁面整體佈局和無需許可權的路由
store
modules
app.js // 專案通用vuex狀態、mutation action等模組
user.js // 使用者模組的
index.js // vuex  store的主入口

在router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import routers from './routers' // 匯出了路由配置陣列項
Vue.use(Router)
const router = new Router({
routers,mode: 'history'
})
export default router

store/modules/app.js

import router from '@/router' // @ 是src目錄， 拿到路由物件
....
router.addRoutes(routes) // routes 為登入後後臺介面返回的動態路由
```

此時，如上配置動態路由已經配置完成， 專案也能跑起來，控制檯也不會報錯和警告，感覺everything is so perfect. 但是在退出登入後，重新登入，開啟控制檯， 滿滿的黃色警告 如圖

意思就是路由發生了衝突， 這是因為addRoutes 給路由表中新增路由，當退出登入的時候vue例項並木有重新初始化，但是卻重新又addRoutes了一次,如果登入的使用者相同或者不同使用者有同樣的許可權路由， 那麼就會被直接在原來路由表基礎上新增，那麼自然就會發生路由衝突了，而此時如果重新整理頁面，vue例項重新初始化就沒有這些警告，

問題來了

vue-router 只提供了addRoutes方法 卻並沒有提供 removeRoutes方法，那麼該如何解決這個衝突呢?

解決方式

經過一番搜尋與實踐，找到了一種方式 ， 重置router的matcher

首先修改router/idnex.js

// 原來的
const router = new Router({
routes,mode: 'history'
})
export router
// 修改為
export const createRouter = (routers) => new Router({
routers,mode: 'history'
})
const router = createRouter(routers)
export router

其次修改store/modules/app.js

// 原來的
import router from '@/router'
....
router.addRoutes(routes) // routes 為登入後後臺介面返回的動態路由
// 修改為
import router,{ createRouter } from '@/router'
import routers from '@/router/routers' // 無需配置的那些路由
...
router.matcher = createRouter(routers).matcher
router.addRoutes(routes) // routes 為登入後後臺介面返回的動態路由， 在更新選單menuList前呼叫
```

如此按照以上的方式即可解決這個問題

以上這篇解決vue addRoutes不生效問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。