vue-router中的beforeEach

Z时代
2024-01-10
分类：综合

vue

最近在做vue项目的开发，用到的技术栈主要是vue相关的，在开发这个项目的时候，设计到了权限，因为是后台管理系统，不同的身份和角色访问系统的时候，系统所展现出来的可访问内容都是不一样的，有兴趣的同学可以参考下RBAC（以角色为基础的权限管理设计）这篇文章写得很详细，很直观，我写这篇文章主要是想要分享一下前端的技术栈vue-router是如何处理的，以及踩过的坑。

vue-router

可以参考官方文档vue-router，官方文档中介绍的很详细，解决权限问题，就用到了addRoutes这个API，去动态添加路由，我项目目前使用的vue-router的版本号是3.0.1，我把我初始化创建路由实例的代码可以展示给你们看一下的：

动态路由处理方式

因为每次在进行路由跳转的时候，都会触发对应的钩子函数，可以参考官网的文档注解：

本人在项目里面是运用了beforeEach这个钩子函数来监控路由的变化的，具体可以参看代码：

beforeEach实现的思路如下：

每次通过vue-router进行页面跳转，都会触发beforeEach这个钩子函数，这个回调函数共有三个参数，to，from，next这三个参数，to表示我要跳转的目标路由对应的参数，from表示来自那个路由，就是操作路由跳转之前的，即将离开的路由对应的参数，next是一个回调函数，一定要调用next方法来resolve这个钩子函数；

这里在使用beforeEach的时候，应该要注意，如果这个beforeEach函数没有合理利用的情况下，就会陷入到无限循环之中。看到的现象就是整个页面不停的刷新，其实从代码的角度来看是一致在进行路由跳转，也就是一致在不停的执行beforeEach这个函数。

当在beforeEach这个函数中调用next({path:'/home'})的时候，会中断当前导航；比如当前导航是去/a，那么遇next({path:'/home'})之后，就会把to.path改成home，然后重新触发beforeEach这个钩子函数，注意是重新触发，而不是在当前这个钩子的函数的基础上去执行；之前因为对这一点理解的不透彻，以为只要是调用next({path:'/home'})就可以直接跳转到home了，但是没有像预期的那样，反而陷入到了无限循环之中；当重新触发以后，因为没有加上合理的判断条件，所以会一直循环。

解决这个无限循环的办法就是加上一个判断，如果to.path===‘/home’，就执行next()；这样子就不会无限循环了。

可以看下代码示例：