第 7 章 路由管理：单页应用的页面切换
文档摘要
第 7 章 · 路由管理：单页应用的页面切换 章节摘要：单页应用只有一个 HTML 页面，"换页"实际是组件切换。Vue Router 把 URL 映射到组件，用历史接口管理地址，用守卫拦截导航。本章从路由表与导航流程讲到嵌套路由、动态参数与懒加载，守卫链是重点——权限控制的正位就在这里。 学习目标 阅读完本章，你应当能够： 配置路由表实现静态、动态、嵌套三类路由； 说出一次导航的完整流程：离开守卫到组件更新； 用守卫链实现登录鉴权与权限路由，避开循环重定向； 用路由懒加载分包，并解释它对首屏管线的影响。 核心概念速览 路由组件也是管线上的普通乘客：换页 = 旧页面组件卸载 + 新页面组件挂载，走的是同一套生命周期。 子章节导航 7.
第 7 章 · 路由管理：单页应用的页面切换
章节摘要：单页应用只有一个 HTML 页面，"换页"实际是组件切换。Vue Router 把 URL 映射到组件，用历史接口管理地址，用守卫拦截导航。本章从路由表与导航流程讲到嵌套路由、动态参数与懒加载，守卫链是重点——权限控制的正位就在这里。
学习目标
阅读完本章，你应当能够：
- 配置路由表实现静态、动态、嵌套三类路由；
- 说出一次导航的完整流程：离开守卫到组件更新；
- 用守卫链实现登录鉴权与权限路由，避开循环重定向；
- 用路由懒加载分包，并解释它对首屏管线的影响。
核心概念速览
路由组件也是管线上的普通乘客：换页 = 旧页面组件卸载 + 新页面组件挂载，走的是同一套生命周期。
子章节导航
7.1 Vue Router 基础
路由表配置、动态参数、嵌套路由、两种历史模式的差异与选择。
7.2 路由进阶
完整导航流程、三级守卫的执行顺序、权限方案、懒加载与滚动行为。
子章节之间的逻辑关系
7.1 解决"地址怎么映射到组件"，7.2 解决"切换前后插什么逻辑"。先会配表再学拦截，顺序反了容易把权限逻辑写进组件生命周期里。
路由表（7.1） └─ 导航流程（7.2）：守卫链拦截 → 异步组件加载 → 组件挂载
前置知识与后续延伸
- 前置：第 5 章组件生命周期（路由切换即组件卸载挂载）、第 6 章仓库（守卫常读登录态）；
- 为后续铺路：路由懒加载是第 9 章首屏优化的主力；第 10 章现代工程里路由配置与 Vite 分包策略联动。
读本章时建议始终带着一个问题：这次切换到底销毁重建了什么、又复用了什么。布局组件在嵌套路由切换时不动、详情页组件在参数变化时复用、keep-alive 缓存的标签页整体跳过渲染——这些行为差异全部可以用"哪个层级的组件实例被换掉了"一句话解释。路由是组件树的编排器，把这句话想透，路由的一切行为对你都不再是黑盒，配置报错时也能顺着"路径匹配到哪一层"这条线快速定位。