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); // 追加路由
  // 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之动态增减路由方式)