前言
上节我们介绍了全局导航守卫的用法与使用场景，全局默认对所有路由都生效，如果我们想要对某个组件进行拦截操作就需要使用组件导航守卫，本节就来看一下组件守卫。
独享守卫
当我们查看路由配置的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就能生效。
导航流程
组件导航守卫有三个，根据名称我们很容易得到三者之间的执行顺序，如果我们加上全局守卫即所有的导航守卫，此时我们的导航流程如下：
- 从A路由导航到B路由，触发A路由的beforeRouteLeave。
- 触发全局守卫beforeEach，如果A、B对应同一个组件则触发组件内的beforeRouteUpdate。
- 触发独享守卫也就是配置中的beforEach参数。
- 触发B路由对应组件的beforeRouteEnter。
- 调用全局守卫的beforeResolve，当导航确认后调用afterEach。
- 导航结束视图更新，最后调用beforeRouteEnter中的next函数，此时next参数就是更新后的实例。
整个流程总结下来就是先离开再进入，注意beforeRouteUpdate触发的时机。
总结
以上就是组件导航守卫，基本用法跟全局是一样的，重点是针对vue3推出的两个组合式API，在使用组合式API之前需要先引入。