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之前需要先引入。

相关推荐
像风一样自由202029 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理1 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
袁煦丞3 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作