vue-router 路由钩⼦函数是什么执⾏顺序是什么

Vue Router 是 Vue.js 的官方路由管理器。在 Vue Router 中,可以使用路由钩子函数来拦截或处理路由的变化。

Vue Router 的路由钩子函数包括以下几种:

全局前置守卫:router.beforeEach
全局前置守卫:router.beforeResolve
组件内的守卫:在 Vue 组件的 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
下面是这些钩子函数的执行顺序:

全局前置守卫(Before Enter):当路由即将发生变化时,全局前置守卫会按照其添加的顺序执行。如果全局前置守卫返回一个 Promise,那么在 Promise resolve 之前,路由不会继续变化。如果任何一个全局前置守卫的 Promise 被 reject,那么路由变化会被取消,并触发 router.onError 钩子。
组件内的守卫:在组件内,beforeRouteEnter 在路由进入之前被调用,beforeRouteUpdate 在当前组件的参数改变时被调用,beforeRouteLeave 在离开时被调用。这些钩子函数按照它们在组件内的声明顺序执行。
全局前置守卫(Before Resolve):当所有路由组件都已解析完成,全局前置守卫会按照其添加的顺序再次执行。这个阶段与 beforeRouteEnter 类似,但是它可以在路由组件解析完成后执行。
导航确认:在所有全局前置守卫和路由组件内的守卫执行完成后,导航被确认,新的组件将被渲染。
全局后置钩子:router.afterEach 在导航完成后被调用。
需要注意的是,全局前置守卫和 router.beforeEach 是两个不同的概念。router.beforeEach 是全局的、全局的,而 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 是局部的、组件内的。

路由钩⼦的执⾏流程, 钩⼦函数种类有:全局守卫、路由守卫、组件守卫
完整的导航解析流程:
1. 导航被触发。
2. 在失活的组件⾥调⽤ beforeRouteLeave 守卫。
3. 调⽤全局的 beforeEach 守卫。
4. 在重⽤的组件⾥调⽤ beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置⾥调⽤ beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件⾥调⽤ beforeRouteEnter。
8. 调⽤全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调⽤全局的 afterEach 钩⼦。
11. 触发 DOM 更新。
12. 调⽤ beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传⼊。

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

emma20080101

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值