vueRouter--matcher之動態增減路由方式

2022-04-15 10:01:40

matcher之動態增減路由

優化專案時，有個環節在主路由下，根據後端返回不同內容，需要修改動態路由。如果直接刪除原來路由，再addrouter新路由，發現原來的路由還是存在的。vue動態新增路由，沒有刪除功能（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之前呼叫一次 resetRouter即可：

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

番外

如果需要刪除新增一級路由下面單個子路由時，可以通過this.$router.options.routes獲取到路由陣列，通過迴圈方式直接進行push或splice，然後再用上面的方法進行全域性替換即可。

vueRouter動態追加路由

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

還有一部分是根據許可權介面返回，動態追加的一些頁面模組路由，如：user

在處理許可權的時候，可以先允許一些不需要許可權認證的路由，如下：

// 開放的路由，可以直接存取
const ALLOW_ROUTES = [
  '/login',
  '/buy',
  // ...
];

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

首先如果沒有登入，直接跳轉登入頁

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');
  // 還原路由（防止路由重複）
  router.matcher = new VueRouter({
    // mode: 'history',
    routes
  }).matcher;
  router.addRoutes(routes: Array<RouteConfig>); // 追加路由
  // util.generateMenu(); // 生成選單，視具體情況而定
  next({
    path: to.path
  });
  return;
}

動態新增更多的路由規則。引數必須是一個符合 routes 選項要求的陣列。

curPath用於輔助處理

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

動態路由主要是根據業務來的，不好寫成一個公共的處理方式，具體在什麼時候追加路由，要自己去判斷，如：重新整理、退出登入、重新登入、沒有匹配到等操作是否滿足

如果還遇到路由重複的問題，可能是在當前頁push同樣路由造成的，這裡可以先判斷一下

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。