Vue Router学习(十二)——组件导航守卫

前言

上节我们介绍了全局导航守卫的用法与使用场景,全局默认对所有路由都生效,如果我们想要对某个组件进行拦截操作就需要使用组件导航守卫,本节就来看一下组件守卫。

独享守卫

当我们查看路由配置的ts类型会发现beforeEnter参数:

这就是路由独享守卫,该守卫在进入路由前触发,注意params等参数的修改不会触发该守卫。此守卫的用法跟全局守卫类似:

js 复制代码
{
path: '/home',
beforeEnter: (to, from) => {
console.log('进入路由')
},
},

上面截图显示ts类型可以是函数数组,所以我们可以声明多个函数组合成一个数组,然后将其赋值给beforeEnter,来实现多个需求。

组件守卫

独享守卫是通过属性进行控制的,而组件守卫是在组件中直接进行定义的,组件守卫有以下三种:

  • beforeRouteEnter:进入路由前钩子函数。跟全局一样这些函数也有着三个参数to、from、next,该函数在进入路由前调用此时实例还未创建所以不能访问this。如果我们真的想访问实例,可以通过next函数进行访问:
js 复制代码
beforeRouteEnter (to, from, next) {
next(e => {
console.log(e)
})
}
  • beforeRouteUpdate:更新路由前钩子函数。我们要明确这里的update指的是路由变化但组件复用,简单来说就是params参数发生了修改,比如开发中经常碰到的详情页。Update在组件挂载后调用,能够直接访问this。
js 复制代码
beforeRouteUpdate (to, from) {
console.log(this)
}
  • beforeRouteLeave:离开路由前钩子函数。该函数也是能够直接访问this,并且如果函数返回fasle就能够阻止路由跳转,因这一特性日常开发中我们用到leave的情况更多一点,比如判断用户是否完成提交操作。
js 复制代码
beforeRouteLeave (to, from) {
console.log(this)
return false //页面不会进行跳转
}

组合式API

vue3引入了组合式API,尤其是在setup里面,我们需要用到对应的API。守卫相关的API有两个:

  • onBeforeRouteUpdate:更新前,跟beforeRouteEnter一样:
js 复制代码
onBeforeRouteUpdate((to, from) => {
})
  • onBeforeRouteLeave:离开前,跟beforeRouteLeave一样:
js 复制代码
onBeforeRouteLeave((to, from) => {
})

组合式API在setup中使用,所以这两个API中无法访问到this。组合式API的好处是可以用于多个组件,而不是像组件只针对单个组件,只要有router-view就能生效。

导航流程

组件导航守卫有三个,根据名称我们很容易得到三者之间的执行顺序,如果我们加上全局守卫即所有的导航守卫,此时我们的导航流程如下:

  1. 从A路由导航到B路由,触发A路由的beforeRouteLeave。
  2. 触发全局守卫beforeEach,如果A、B对应同一个组件则触发组件内的beforeRouteUpdate
  3. 触发独享守卫也就是配置中的beforEach参数。
  4. 触发B路由对应组件的beforeRouteEnter。
  5. 调用全局守卫的beforeResolve,当导航确认后调用afterEach。
  6. 导航结束视图更新,最后调用beforeRouteEnter中的next函数,此时next参数就是更新后的实例。

整个流程总结下来就是先离开再进入,注意beforeRouteUpdate触发的时机。

总结

以上就是组件导航守卫,基本用法跟全局是一样的,重点是针对vue3推出的两个组合式API,在使用组合式API之前需要先引入。

相关推荐
烛阴26 分钟前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化40 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月40 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码1 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder1 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom