路由钩子函数

最新推荐文章于 2024-01-17 19:45:00 发布

Annifan6666

最新推荐文章于 2024-01-17 19:45:00 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Annifan6666/article/details/121597546

本文详细介绍了Vue.js路由钩子函数的种类及其执行顺序，包括全局钩子（beforeEach、afterEach、beforeResolve）、单个路由钩子（beforeEnter）以及组件路由钩子（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）。特别强调了beforeRouteEnter中无法使用`this`，以及在路由更新时如何获取更新后的路由信息。同时，文章还提及了路由配置中的beforeEnter钩子和组件生命周期中beforeDestroy的执行顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由钩子函数分为三种:

1：全局钩子： beforeEach、 afterEach、beforeResolve

2：单个路由里面的钩子： beforeEnter

3:组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

路由所对应组件勾子
beforeRouteEnter:进入前，在beforeCreate之前执行，不能使用this
beforeRouteEnter((to,from,next)=>{
next((vm)=>{
vm:当前组件的实例对象
})
})
beforeRouteUpdate:更新前，路由更新了，路由所对应组件不变时执行
注意：它是更新前，如果获取当前路由，它是更新前的路由信息，如果要
获取更新后的使用this.$nextTick(()=>{获取更新后的})
beforeRouteLeave:路由离开前
路由配制所对应勾子
beforeEnter:读取路由配制时执行

执行先后
beforeEach===>beforeEnter===>beforeRouteEnter===>beforeResolve===>afterEach
更新时执行先后
beforeEach===>beforeRouteUpdate===>afterEach

beforeDestroy执行时间节点
A路由跳转到B路由时它们A组件与B组件执行的生命周期勾子
beforeCreate(B)===>created(B)===>beforeMount(B)===>beforeDestroy(A)===>
destroyed(A)===>mounted(B)
父组件与子组件生命周期执行先后
beforeCreate(父)===>created(父)===>beforeMount(父)===>beforeCreate(子)===>
created(子)===>beforeMount(子)===>mounted(子)===>mounted(父)