vue中addRoutes不生效怎么辦

這篇文章主要介紹了vue中addRoutes不生效怎么辦，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

動(dòng)態(tài)添加導(dǎo)航欄時(shí)，addRoutes不生效解覺(jué)

1、在addroutes前，使用router.options.routes=XXXXX的方法手動(dòng)添加

2、使用作者的方法，在store里維護(hù)一個(gè)routes對(duì)象，然后使用這個(gè)對(duì)象遍歷生成側(cè)面導(dǎo)航欄

補(bǔ)充知識(shí)：vue-router 動(dòng)態(tài)添加路由 router.addRoutes(routes)遇到的二次登陸路由沖突問(wèn)題解決

起因

在當(dāng)前項(xiàng)目中使用的iview-admin,路由要根據(jù)權(quán)限動(dòng)態(tài)生成，是在登錄后獲取當(dāng)前用戶權(quán)限內(nèi)的路由使用 vue-router 的 addRoutes() 方法動(dòng)態(tài)添加到路由表中

遇到的問(wèn)題

項(xiàng)目目錄

...
router
index.js // 路由主配置，路由守衛(wèi)等
routers.js // 存放頁(yè)面整體布局和無(wú)需權(quán)限的路由
store
modules
app.js // 項(xiàng)目通用vuex狀態(tài)、mutation action等模塊
user.js // 用戶模塊的
index.js // vuex  store的主入口

在router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import routers from './routers' // 導(dǎo)出了路由配置數(shù)組項(xiàng)
Vue.use(Router)
const router = new Router({
routers,
mode: 'history'
})
export default router

store/modules/app.js

import router from '@/router' // @ 是src目錄， 拿到路由對(duì)象
....
router.addRoutes(routes) // routes 為登錄后后臺(tái)接口返回的動(dòng)態(tài)路由
```

此時(shí)，如上配置動(dòng)態(tài)路由已經(jīng)配置完成， 項(xiàng)目也能跑起來(lái)，控制臺(tái)也不會(huì)報(bào)錯(cuò)和警告，感覺(jué)everything is so perfect. 但是在退出登錄后，重新登錄，打開(kāi)控制臺(tái)， 滿滿的黃色警告 如圖

意思就是路由發(fā)生了沖突， 這是因?yàn)閍ddRoutes 給路由表中添加路由，當(dāng)退出登錄的時(shí)候vue實(shí)例并木有重新初始化，但是卻重新又addRoutes了一次,如果登錄的用戶相同或者不同用戶有同樣的權(quán)限路由， 那么就會(huì)被直接在原來(lái)路由表基礎(chǔ)上添加，那么自然就會(huì)發(fā)生路由沖突了，而此時(shí)如果刷新頁(yè)面，vue實(shí)例重新初始化就沒(méi)有這些警告，

問(wèn)題來(lái)了

vue-router 只提供了addRoutes方法 卻并沒(méi)有提供 removeRoutes方法，那么該如何解決這個(gè)沖突呢?

解決方式

經(jīng)過(guò)一番搜索與實(shí)踐，找到了一種方式 ， 重置router的matcher

首先修改router/idnex.js

// 原來(lái)的
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

// 原來(lái)的
import router from '@/router'
....
router.addRoutes(routes) // routes 為登錄后后臺(tái)接口返回的動(dòng)態(tài)路由
// 修改為
import router, { createRouter } from '@/router'
import routers from '@/router/routers' // 無(wú)需配置的那些路由
...
router.matcher = createRouter(routers).matcher
router.addRoutes(routes) // routes 為登錄后后臺(tái)接口返回的動(dòng)態(tài)路由， 在更新菜單menuList前調(diào)用
```

如此按照以上的方式即可解決這個(gè)問(wèn)題

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享vue中addRoutes不生效怎么辦內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!