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

最新推荐文章于 2024-09-04 17:14:43 发布

emma20080101

最新推荐文章于 2024-09-04 17:14:43 发布

阅读量484

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/emma20080101/article/details/135720725

版权

本文详细介绍了VueRouter中的路由钩子函数，包括全局前置守卫（如beforeEach）、组件内守卫（beforeRouteEnter等）以及它们在导航过程中的执行顺序。重点讲述了完整的导航解析流程，从触发到DOM更新的各个环节。

摘要由CSDN通过智能技术生成

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