路由的导航守卫及 beforeEach 和 beforeResolve的区别
路由导航守卫?路由守卫就是路由跳转的时候会触发的钩子函数我们把他称为路由守卫vue一共为我们提供了三种路由守卫全局守卫beforeEach 路由进入之前beforeResolve 路由解析之前这个几乎不用afterEach 路由进入之后组件内置守卫beforeRouteEnter 路由进入之前beforeRouteUpdate 路由更新之前beforeRouteLeave 路由离开之前路由独享守卫
·
路由导航守卫?
路由守卫就是路由跳转的时候会触发的钩子函数我们把他称为路由守卫
vue一共为我们提供了三种路由守卫
全局守卫
- beforeEach 路由进入之前
- beforeResolve 路由解析之前 这个几乎不用
- afterEach 路由进入之后
组件内置守卫
- beforeRouteEnter 路由进入之前
- beforeRouteUpdate 路由更新之前
- beforeRouteLeave 路由离开之前
路由独享守卫
- beforeEnter 路由进入之前
在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权. ⽐如:当⽤户登录之后,我们会把后台返回的token以及⽤户信息保存到vuex和本地,当⻚⾯进⾏跳转的时候,我们会在路由守卫⾥⾯获取vuex⾥⾯的token,如果token存在的话,我们则使⽤next让他进⼊要跳转的⻚⾯,如果token不存在的话我们使⽤next⽅法让他回到登录⻚以上就是我对vue路由守卫的理解
三种守卫全局 组件 独享守卫的区别:
- 作用范围不同 全局作用于所有页面 组件作用于单个组件 独享也是守卫单个页面
- 代码写的位置不一样 全局守卫写在 router/index.js 中 组件守卫写在组件里 跟 data 同级 独享守卫写在路由规则里
- 执行顺序有区别 执行的顺序
beforeEach 前置守卫
beforeEnter 独享守卫
beforeRouteEnter 组件守卫
beforeResolve 解析守卫
afterEach 路由后置守卫
全局守卫 beforeEach 和 beforeResolve
他们两个都会在路由跳转前就执行 参数都是 to from next
他们两个的区别
执行的时机不一样
beforeEach 是在路由规则被循环之前执行
beforResolve 是在组件被解析之后调用
执行顺序
beforeEach 要比 beforResolve 先执行
更多推荐
已为社区贡献1条内容
所有评论(0)