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

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui