解決vue addRoutes不生效問(wèn)題

更新時(shí)間：2020年08月04日 14:50:35 作者：高遠(yuǎn)321

這篇文章主要介紹了解決vue addRoutes不生效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

動(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)前用戶(hù)權(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 // 用戶(hù)模塊的
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了一次,如果登錄的用戶(hù)相同或者不同用戶(hù)有同樣的權(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)題

以上這篇解決vue addRoutes不生效問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: