vue.js - 通过 vue-router 导航时组件的生命周期钩子的优先级是什么

Question

我注意到从起点导航到终点时created，目标组件的钩子发生在起点的钩子之前。beforeDestroy假设我们有这个路由器：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ],
})

从 导航到时，组件的生命周期钩子（ beforeCreate, created, beforeMount, mounted, activated, deactivated, beforeDestroy, ）的实际优先级是多少？destroyed/foo/bar

结合导航守卫（beforeRouteLeave, beforeEach, beforeRouteUpdate, beforeEnter beforeRouteEnter, beforeResolve, afterEach）的完整导航流程是什么？

标签： vue.jsvue-componentvue-router

Answer 1

根据这个小提琴Foo，这是从到导航时生命周期挂钩的优先级Bar：

1. Bar：beforeCreate
2. Bar：created
3. Bar：beforeMount
4. Foo：beforeDestroy
5. Foo：destroyed
6. Bar：mounted

以下是完整的导航流程：

1. 出身：beforeRouteLeave守卫。
2. 全局：beforeEach守卫。
3. 目的地：beforeEnter守卫。
4. 目的地：beforeRouteEnter守卫。
5. 全局：beforeResolve守卫。
6. 全局：afterEach守卫。
7. 目的地：beforeCreate生命周期钩子。
8. 目的地：created生命周期钩子。
9. 目的地：beforeMount生命周期钩子。
10. 目的地：回调传递给next守卫beforeRouteEnter。
11. 来源：beforeDestroy生命周期钩子。
12. 来源：destroyed生命周期钩子。
13. 目的地：mounted生命周期钩子。

使用时keep-alive：

9. ...
10. 目的地：回调传递给next守卫beforeRouteEnter。
11. 来源：deactivated生命周期钩子。
12. 目的地：mounted生命周期钩子。
13. 目的地：activated生命周期钩子。