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' }) }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。