#Vue Router 原理全解

#1. 面试题

Q: SPA 路由的原理是什么？Hash 和 History 模式有何区别？导航守卫的执行顺序？

#2. 路由模式

#(1) Hash 模式

• URL 带有 # (如 http://site.com/#/home)。
• 原理：监听 window.onhashchange 事件。
• 优点：兼容性最好 (IE8+)，无需服务端配置。
• 缺点：URL 不美观，占用了锚点功能。

#(2) History 模式

• URL 干净 (如 http://site.com/home)。
• 原理：利用 HTML5 History API (pushState, replaceState) 改变 URL 而不刷新页面，监听 popstate 处理后退。
• 缺点：需要服务端支持。假如用户在 /home 刷新，如果 Nginx 没有配置 try_files 指向 index.html，会报 404 (因为服务器上没有 home 这个文件)。

#(3) Abstract / Memory 模式

• 不依赖浏览器 URL，路由记录在内存中。
• 场景：Node.js 环境 (SSR)、Electron、非 Web 环境。

#3. 导航守卫 (面试必考)

完整流程：

1. 触发：导航被触发。
2. Leave: 在失活的组件里调用 beforeRouteLeave。
3. Global Before: 调用全局 beforeEach。
4. Route Update: 重用组件里调用 beforeRouteUpdate (如 /user/1 -> /user/2)。
5. Route Enter: 在路由配置里调用 beforeEnter。
6. Async Component: 解析异步路由组件。
7. Component Enter: 在被激活的组件里调用 beforeRouteEnter。
8. Global Resolve: 调用全局 beforeResolve。
9. Confirmed: 导航被确认。
10. Global After: 调用全局 afterEach。
11. DOM Update: 触发 DOM 更新。
12. Next Callback: 调用 beforeRouteEnter 传给 next 的回调函数。

#4. 路由与 Keep-Alive

配合使用时，路由组件会获得额外的生命周期：

• onActivated: 再次进入路由。
• onDeactivated: 离开路由（但未销毁）。