vueRouter--matcher之动态增减路由方式
时间：2023-02-06 10:30:18|栏目：vue|点击： 次
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'
})
}
