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)方式直接進行push或splice，然后再用上面的方法進行全局替換即可。
vueRouter動態(tài)追加路由
路由分為靜態(tài)路由，如事先寫好的，公共的路由，如：404、login等
還有一部分是根據(jù)權(quán)限接口返回，動態(tài)追加的一些頁面模塊路由，如：user
在處理權(quán)限的時候，可以先允許一些不需要權(quá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)文章
這篇文章主要介紹了Vue 實現(xiàn)從小到大的橫向滑動效果,結(jié)合實例形式詳細分析了vue.js橫向漸變滑動效果的實現(xiàn)步驟、相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-10-10
本篇文章主要介紹了詳解Vue2 無限級分類(添加,刪除,修改) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
最近在開發(fā)時遇到一個問題,是在輸入框里面放一個樹形組件,這篇文章主要給大家介紹了關(guān)于前端vue3樹形組件使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
vue項目中的數(shù)據(jù)變化被watch監(jiān)聽并處理
這篇文章主要介紹了vue項目中的數(shù)據(jù)變化被watch監(jiān)聽并處理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3 reactive定義的引用類型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式問題
這篇文章主要介紹了vue3 reactive定義的引用類型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
如何實現(xiàn)echarts markline標簽名顯示自己想要的
這篇文章主要介紹了實現(xiàn)echarts markline標簽名顯示自己想要的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
跨域問題是由瀏覽器引起的安全限制,而不是Vue框架本身導(dǎo)致的,Vue本身并不限制跨域訪問,它只是一個前端框架,負責(zé)構(gòu)建用戶界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問題的常用方式,需要的朋友可以參考下2023-10-10
Vue2.0利用vue-resource上傳文件到七牛的實例代碼
本篇文章主要介紹了Vue2.0利用vue-resource上傳文件到七牛的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07
vue?elementUI之this.$confirm的使用方式
這篇文章主要介紹了vue?elementUI之this.$confirm的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
這篇文章主要介紹了基于vue2.0實現(xiàn)的級聯(lián)選擇器，基于Vue的級聯(lián)選擇器，可以單項，二級， 三級級聯(lián)，多級級聯(lián)，有興趣可以了解一下2017-06-06