這篇文章主要介紹了vue中addRoutes不生效怎么辦，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
動態添加導航欄時，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 routerstore/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不生效怎么辦內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
