快捷導(dǎo)航

vueRouter--matcher之動(dòng)態(tài)增減路由方式

更新時(shí)間：2022年04月15日 08:52:00 作者：我的中二病又犯了

這篇文章主要介紹了vueRouter--matcher之動(dòng)態(tài)增減路由方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

matcher之動(dòng)態(tài)增減路由

優(yōu)化項(xiàng)目時(shí)，有個(gè)環(huán)節(jié)在主路由下，根據(jù)后端返回不同內(nèi)容，需要修改動(dòng)態(tài)路由。如果直接刪除原來(lái)路由，再addrouter新路由，發(fā)現(xiàn)原來(lái)的路由還是存在的。vue動(dòng)態(tài)新增路由，沒(méi)有刪除功能（vue官方文檔好像沒(méi)有提供）。

解決辦法

使用matcher ：

const createRouter = () => ?new Router({
? ? routes: [{
? ? ? ? ? ? path: '/',
? ? ? ? ? ? name: '登錄',
? ? ? ? ? ? component: login
? ? ? ? }]
const router = createRouter()
export function resetRouter () {?
?const newRouter = createRouter()
?router.matcher = newRouter.matcher
}
export default router

局部引入,在addrouter之前調(diào)用一次 resetRouter即可：

import {resetRouter} from '@/router'
?resetRouter();
?this.$router.addRoutes(routeMenu);

番外

如果需要?jiǎng)h除添加一級(jí)路由下面單個(gè)子路由時(shí)，可以通過(guò)this.$router.options.routes獲取到路由數(shù)組，通過(guò)循環(huán)方式直接進(jìn)行push或splice，然后再用上面的方法進(jìn)行全局替換即可。

vueRouter動(dòng)態(tài)追加路由

路由分為靜態(tài)路由，如事先寫好的，公共的路由，如：404、login等

還有一部分是根據(jù)權(quán)限接口返回，動(dòng)態(tài)追加的一些頁(yè)面模塊路由，如：user

在處理權(quán)限的時(shí)候，可以先允許一些不需要權(quán)限認(rèn)證的路由，如下：

// 開(kāi)放的路由，可以直接訪問(wèn)
const ALLOW_ROUTES = [
? '/login',
? '/buy',
? // ...
];

具體路由攔截全在router.beforeEach里處理

首先如果沒(méi)有登錄，直接跳轉(zhuǎn)登錄頁(yè)

if (!ALLOW_ROUTES.includes(to.path) && !isLogin) { // 未登錄
? next({
? ? path: '/login',
? ? replace: true
? });
? return;
}

如果已登錄，使用router.addRoutes追加路由

if(isLogin && (sessionStorage.getItem('curPath') || to.matched[0].path === '*') ?) {
? sessionStorage.removeItem('curPath');
? // 還原路由（防止路由重復(fù)）
? router.matcher = new VueRouter({
? ? // mode: 'history',
? ? routes
? }).matcher;
? router.addRoutes(routes: Array<RouteConfig>); // 追加路由
? // util.generateMenu(); // 生成菜單，視具體情況而定
? next({
? ? path: to.path
? });
? return;
}

動(dòng)態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個(gè)符合 routes 選項(xiàng)要求的數(shù)組。

curPath用于輔助處理

router.afterEach(to => {
? // 保存路徑
? if (to.path !== '/login') {
? ? sessionStorage.setItem('curPath', JSON.stringify({
? ? ? path: to.path
? ? }));
? }
})

動(dòng)態(tài)路由主要是根據(jù)業(yè)務(wù)來(lái)的，不好寫成一個(gè)公共的處理方式，具體在什么時(shí)候追加路由，要自己去判斷，如：刷新、退出登錄、重新登錄、沒(méi)有匹配到等操作是否滿足

如果還遇到路由重復(fù)的問(wèn)題，可能是在當(dāng)前頁(yè)push同樣路由造成的，這里可以先判斷一下

if(router.currentRoute.name !== 'login') {
? router.push({
? ? name: 'login'
? })
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vueRouter--matcher之動(dòng)態(tài)增減路由方式

目錄

matcher之動(dòng)態(tài)增減路由

解決辦法

番外

vueRouter動(dòng)態(tài)追加路由

具體路由攔截全在router.beforeEach里處理

curPath用于輔助處理

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具