第四章：Vue Router

核心目标：掌握单页面应用（SPA）的路由原理，实现复杂的嵌套路由管理，并利用导航守卫构建严密的权限控制体系。

---

📋 本章核心知识点

知识点	说明	难度
路由原理	History API 与 Hash 模式的差异	⭐⭐
路由配置	嵌套路由、动态路由、重定向	⭐⭐
导航守卫	全局、独享与组件级守卫的执行顺序	⭐⭐⭐
编程式导航	在 JS 中自由穿梭	⭐
路由元信息	meta 的高级玩法（权限、标题、动画）	⭐⭐⭐

---

4.1 SPA 路由：为什么页面不刷新？

4.1.1 传统 MPA vs 现代 SPA

• MPA (多页面应用)：每次点击链接，浏览器都会向服务器请求一个全新的 HTML。
• SPA (单页面应用)：整个应用只有一个 HTML。点击链接时，JavaScript 会拦截请求，仅替换页面中的一部分内容，并同步更新浏览器地址。

4.1.2 路由模式

1. Web History 模式 （推荐）：
   • URL 看起来很像正常的地址 example.com/user/1。
   • 注意：部署时需要后端配合配置重定向，否则刷新 404。
2. Web Hash 模式 ：
   • URL 中包含 # 号，如 example.com/#/user/1。
   • 优点：不需要后端配置，兼容性极好。

---

4.2 导航守卫：路由的"保安"

导航守卫是路由系统中最强大的功能，它允许我们在导航发生前拦截并执行逻辑。

4.2.1 全局前置守卫 (beforeEach)

这是实现 权限校验 的最佳位置。

router.beforeEach((to, from) => {
  // 检查目标路由是否需要登录
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return { path: '/login' } // 重定向到登录页
  }
})

4.2.2 完整的导航生命周期

当点击链接到加载组件，Vue Router 执行顺序如下：

1. 失活组件：onBeforeRouteLeave
2. 全局前置：beforeEach
3. 路由独享：beforeEnter
4. 解析组件：beforeRouteEnter
5. 全局后置：afterEach

---

4.3 编程式导航 vs 声明式导航

• 声明式 ：使用 <RouterLink to="/home">。它本质上渲染为一个 <a> 标签，但会被 Vue Router 拦截。
• 编程式 ：使用 router.push('/home')。通常用于逻辑执行后的跳转（如登录成功后转入首页）。

---

4.4 路由元信息 (Meta)

meta 是一个灵活的对象，可以承载任何自定义数据。

• requiresAuth: 是否需要登录。
• title: 页面网页标题。
• transition: 页面切换的具体动画名称。

---

4.5 性能优化：组件懒加载

通过动态导入（Dynamic Import），我们可以实现组件的按需加载，大幅减少首屏 JS 的体积。

const UserProfile = () => import('./views/UserProfile.vue')

---

📌 章节实战建议

1. 参数解耦 ：在路由配置中使用 props: true，将 URL 参数直接作为 Props 传给组件，避免组件过度依赖 $route 对象。
2. 加载反馈 ：在全局守卫中配合 NProgress 插件，在路由切换时展示顶部的加载进度条。
3. 返回策略 ：合理使用 router.replace 代替 router.push，防止产生过多的历史记录（如登录成功重定向后，不希望用户点击后退回到登录页）。

---

🔗 专栏链接 ：Vue 3 全栈开发实战专栏

📦 项目源码资源 ：点击下载项目源码