1. Vue Router 源码解析

Vue Router 3.x 源码解析

Vue Router 的三种路由模式

• history （html5）
• hash

• abstract

  Vue router 导航守卫

• beforeEach：全局前置守卫

• beforeResolve：全局解析守卫
• afterEach：全局后置钩子
• beforeEnter：路由独享守卫
• 组件内的守卫：
  • 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 的回调函数，创建好的组件实例会作为回调函数的参数传入。

Hooks注册源码实现：

function registerHook (list: Array<any>, fn: Function): Function {
  list.push(fn)
  return () => {
    const i = list.indexOf(fn)
    if (i > -1) list.splice(i, 1)
  }
}