vue路由执行流程

1. 全局路由

   1. beforeEach 前置守卫（当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。）

   2. beforeResolve 解析守卫 （每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。）确定路由且组件内守卫解析后执行

   3. afterEach 后置守卫 对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用

2. 路由独享

   1. beforeEnter（beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时，才会被触发。）

3. 组件独享

   1. beforeRouteEnter 在渲染该组件的对应路由被验证前调用 （beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。）

   2. beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用 （支持给 next 传递回调的唯一守卫）

   3. beforeRouteLeave 在导航离开渲染该组件的对应路由时调用（预防用户在还未保存修改前突然离开。）

   4. 组合式用法： 如果你正在使用组合 API 和 setup 函数来编写组件，你可以通过 onBeforeRouteUpdate 和 onBeforeRouteLeave 分别添加 update 和 leave 守卫。

4. 流程顺序

   1. 生动形象的例子

      1. 当前路径 /home-<Home>,用户在url上输入 /user/home-<UserHome>，导航被触发

      2. 在失活的组件里(<Home>)调用 beforeRouteLeave 守卫。

      3. 调用全局的 beforeEach 守卫。

      4. 在重用的组件里(<UserHome>)调用 beforeRouteUpdate 守卫

      5. 调用全局的 beforeEnter(路由独享)

      6. 解析异步路由组件(<UserHome>)

      7. 在被激活的组件里(<UserHome>)调用 beforeRouteEnter

      8. 调用全局的 beforeResolve 守卫

      9. 导航被确认 /user/home -> <UserHome>

      10. 调用全局的 afterEach 钩子

      11. 触发 DOM 更新

      12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

vue组件生命周期

1. onBeforeMount() 挂载之前

2. dev onRenderTracked() 渲染过程中追踪到响应式依赖

3. dev onRenderTriggered() 响应式依赖的变更触发组件渲染

4. onMounted() 挂载完成

5. onBeforeUpdate() 更新之前

6. onUpdated() 组件更新

7. onBeforeUnmount() 卸载之前

8. onUnmounted() 卸载之后

9. onErrorCaptured() 后代组件错误时执行

10. onActivated() 组件实例是缓存树的一部分，当组件被插入到 DOM 中时调用。

11. onDeactivated() 组件实例是缓存树的一部分，当组件从DOM 中移除时调用。

12. ssr onServerPrefetch() 组件实例在服务器上被渲染之前调用。