vue的导航钩子有3种：1、全局守卫钩子，是指路由示例上直接操作的钩子函数，特点是所有路由配置的组件都会触发。2、路由独享守卫钩子，是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。3、局部守卫钩子，是指在组件内执行的钩子函数，类似于数组内的生命周期函数，相当于为配置路由的组件添加的生命周期钩子函数。
本教程操作环境：windows7系统、vue3版，dell g3电脑。
导航钩子的作用
vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。导航钩子的分类
全局守卫路由独享守卫局部守卫1、全局守卫是指路由示例上直接操作的钩子函数，特点是所有路由配置的组件都会触发。简单点说就是触发路由就会触发这些钩子函数。钩子函数执行顺序包括beforeeach、beforeresolve、aftereach三个。
[beforeeach]：在路由跳转前触发，参数包括to,from,next三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。
router.beforeeach router.beforeresolve router.aftereach const router = new vuerouter({ ... }); router.beforeeach((to, from, next) => { // do someting });
to：代表要进入的目标，它是一个路由对象from：代表当前正要离开的路由，同样也是一个路由对象next：这是一个必须需要调用的方法，而具体的执行效果则依赖next方法调用的参数[beforeresolve]：这个钩子和beforeeach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeeach区别官方解释为：
区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就会被调用。
即在beforeeach和组件内beforerouteenter之后，aftereach之后，aftereach之前调用。
[aftereach]：和beforeeach相反，它是在路由跳转完成之后触发，参数包括to、from，没有了next，它发生在beforeeach和beforeresolve之后，beforerouteenter(足迹按内守卫)之前。
const router = new vuerouter({ ... }); router.beforeeach((to, from, next) => { // do someting }); //全局后置钩子，后置钩子并没有 next 函数，也不会改变导航本身 router.aftereach((to, from) => { // do someting });
2、路由独享守卫是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。其位置如下，也就是像file这样的组件都存在这样的钩子函数。目前它只有一个钩子函数beforeenter。
[beforeenter]：和beforeeach完全相同，如果都设置则在beforeeach之后紧随执行，参数有to、from、next。
cont router = new vuerouter({ routes: [ { path: '/file', component: file, beforeenter: (to, from ,next) => { // do someting } } ] });
3、局部守卫是指在组件内执行的钩子函数，类似于数组内的生命周期函数，相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括beforerouteenter、beforerouteupdate(2.2新增)、beforerouteleave三个，执行位置如下：
const file = { template: `<div>this is file</div>`, beforerouteenter(to, from, next) { // do someting // 在渲染该组件的对应路由被 confirm 前调用 }, beforerouteupdate(to, from, next) { // do someting // 在当前路由改变，但是依然渲染该组件是调用 }, beforerouteleave(to, from ,next) { // do someting // 导航离开该组件的对应路由时被调用 } }
路由跳转导航解析流程，当由a路由–>b路由的时候
1、在a组件里调用离开守卫。 a组件中的beforerouterleave
2、调用全局的beforeeach守卫。 router.beforeeach
3、再执行b路由配置里调用beforeenter。
routes:[ { path:'/b', component:b, beforeenter:(to,form,next)=>{ ..... } } ]
4、再执行b组件的进入守卫。 b组件中beforerouterenter
5、调用全局的beforeresolve守卫(2.5+)。 router.beforeresolve
6、导航被确认。
7、调用全局的aftereach钩子。 router.aftereach
8、触发dom更新。
【相关推荐：vuejs视频教程、web前端开发】
以上就是vue的导航钩子有哪几个的详细内容。