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

发布时间:2024年01月22日

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 的回调函数,创建好的组件实例会作为回调函数的参数传?。

文章来源:https://blog.csdn.net/emma20080101/article/details/135720725
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。