vueRouter--matcher之動態(tài)增減路由方式
matcher之動態(tài)增減路由
優(yōu)化項目時，有個環(huán)節(jié)在主路由下，根據(jù)后端返回不同內(nèi)容，需要修改動態(tài)路由。如果直接刪除原來路由，再addrouter新路由，發(fā)現(xiàn)原來的路由還是存在的。vue動態(tài)新增路由，沒有刪除功能（vue官方文檔好像沒有提供）。
解決辦法
使用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);番外
如果需要刪除添加一級路由下面單個子路由時，可以通過this.$router.options.routes獲取到路由數(shù)組，通過循環(huán)方式直接進(jìn)行push或splice，然后再用上面的方法進(jìn)行全局替換即可。
vueRouter動態(tài)追加路由
路由分為靜態(tài)路由，如事先寫好的，公共的路由，如：404、login等
還有一部分是根據(jù)權(quán)限接口返回，動態(tài)追加的一些頁面模塊路由，如：user
在處理權(quán)限的時候，可以先允許一些不需要權(quán)限認(rèn)證的路由，如下：
// 開放的路由，可以直接訪問 const ALLOW_ROUTES = [ ? '/login', ? '/buy', ? // ... ];
具體路由攔截全在router.beforeEach里處理
首先如果沒有登錄，直接跳轉(zhuǎn)登錄頁
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;
}動態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個符合 routes 選項要求的數(shù)組。
curPath用于輔助處理
router.afterEach(to => {
? // 保存路徑
? if (to.path !== '/login') {
? ? sessionStorage.setItem('curPath', JSON.stringify({
? ? ? path: to.path
? ? }));
? }
})動態(tài)路由主要是根據(jù)業(yè)務(wù)來的，不好寫成一個公共的處理方式，具體在什么時候追加路由，要自己去判斷，如：刷新、退出登錄、重新登錄、沒有匹配到等操作是否滿足
如果還遇到路由重復(fù)的問題，可能是在當(dāng)前頁push同樣路由造成的，這里可以先判斷一下
if(router.currentRoute.name !== 'login') {
? router.push({
? ? name: 'login'
? })
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue3 ref 和reactive的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了VUE安裝和使用vant組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue實現(xiàn)上下層疊輪播圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
前端開發(fā)需要經(jīng)常使用ECharts圖表渲染數(shù)據(jù)信息，在一個項目中我們經(jīng)常需要使用多個圖表，選擇封裝ECharts組件復(fù)用的方式可以減少代碼量，增加開發(fā)效率。感興趣的可以閱讀一下本文2023-04-04
這篇文章主要給大家分享了Vue3的 插槽使用匯總，在 2.6.0中，vue 為具名插槽和作用于插槽引入了一個新的統(tǒng)一語法：v-slot。它取代了 slot 和 slot-scope 在新版中的應(yīng)用，下面就一起來看看文章的詳細(xì)內(nèi)容吧2021-12-12
這篇文章主要介紹了Vue使用el-dialog關(guān)閉后重置表單方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
本篇文章主要介紹了詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報錯的問題
這篇文章主要介紹了vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue-cli3 取消eslint校驗代碼的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了vue 彈框產(chǎn)生的滾動穿透問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09