vue-router中的beforeEach

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

  • vue-router

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

vue-router中的beforeEach_第1张图片

  • 动态路由处理方式

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

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

vue-router中的beforeEach_第2张图片

 

  • 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();这样子就不会无限循环了。

可以看下代码示例:

vue-router中的beforeEach_第3张图片

 

以上就是本人在本次写项目的时候踩过的坑,跟大家分享一下经验,喜欢的话,就点个赞吧!

 

 

 

你可能感兴趣的:(JS高阶,vue-router,vue-router,路由全局守卫,beforeEach)