vueRouter matcher動態增減路由方式是什么

今天小編給大家分享一下vueRouter matcher動態增減路由方式是什么的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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'
  })
}

以上就是“vueRouter matcher動態增減路由方式是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。