第4章 Vue路由、导航守卫与权限控制
路由与权限控制是大厂面试中命中率超过90%的核心考点。本章从守卫执行流程、权限校验架构到动态路由实战，完整覆盖面试各轮次考察要点。掌握本章内容，可应对从基础API到复杂权限设计的全链路追问。
📌 面试问题 1：Vue Router 导航守卫有哪些？执行流程是什么？
| 面试官考察点 | 基础知识扎实度、执行顺序理解、是否具备实战经验 |
| 回答框架 | 分类 → 执行流程 → 关键时序 → 实战注意点 |
📝 示例回答：
导航守卫分三类：全局守卫（beforeEach/beforeResolve/afterEach）、路由独享守卫（beforeEnter）、组件内守卫（beforeRouteEnter/Update/Leave）。执行顺序为：导航触发→失活组件beforeRouteLeave→全局beforeEach→路由beforeEnter→全局beforeResolve→导航确认→全局afterEach→DOM更新→组件beforeRouteEnter。
❓ 可能追问：
- next('/login') 与 next({...}) 的区别？
- 异步守卫如何处理？多个 next 调用会怎样？
- beforeRouteEnter 中为什么不能访问 this？如何解决？
⚠️ 避坑提醒：守卫中必须调用 next()，否则页面白屏；同一个守卫中避免多次调用 next()；beforeRouteEnter 无法访问 this，可通过 vm 参数或组件内守卫 beforeRouteUpdate 替代。
📌 面试问题 2：如何实现路由级别的权限控制？
| 面试官考察点 | 权限架构设计能力、动态路由掌握程度、工程化落地经验 |
| 回答框架 | 鉴权流程 → 动态路由设计 → 数据持久化 → 注销清理 → 边界处理 |
📝 示例回答：
核心流程：登录后获取用户角色与权限树→存入 Pinia 并持久化→beforeEach 中判断 →根据角色调用 addRoutes 动态注入可访问路由→未匹配时重定向 404。注销时清空路由表（通过 resetRouter）并清除权限数据，避免路由重复添加。
❓ 可能追问：
- 刷新页面时动态路由丢失如何解决？
- 权限树如何设计？后端返回什么数据结构？
- addRoutes 已废弃，Vue Router 4 中用什么替代？
⚠️ 避坑提醒：动态路由需在 beforeEach 中同步判断，避免异步加载导致路由未注入就导航；刷新时从持久化存储中恢复权限数据并重新 addRoutes；Vue Router 4 使用 addRoute 逐条添加，配合路由深度合并。
📌 面试问题 3：路由懒加载与动态路由在实际项目中如何结合使用？
| 面试官考察点 | 性能优化意识、工程化能力、权限与加载策略的综合设计 |
| 回答框架 | 懒加载原理 → 动态路由场景 → 权限结合 → 预加载策略 → 性能收益 |
📝 示例回答：
使用 () => import('@/views/Admin.vue') 实现路由懒加载，Webpack 自动代码分割。结合动态路由时，根据权限树按需注入模块路由，实现「千人千面」的加载策略。同时配合 webpackPrefetch 对高频模块预加载，首屏体积减少 40% 以上。
❓ 可能追问：
- 懒加载对首屏加载速度的具体影响？如何量化？
- 如何避免懒加载导致的「白屏闪烁」？
- Webpack 代码分割的 chunk 命名策略？
⚠️ 避坑提醒：懒加载组件路径变化时需同步更新路由配置，否则 chunk 加载失败；避免过度分割（单文件过大或过小）；动态路由对应的组件需确保在权限匹配时已注册，否则页面空白。
🏗️ 项目案例：企业级 RBAC 权限管理平台
| 项目名称 | RBAC 权限管理后台系统 |
| 业务背景 | 支撑公司内部 10+ 部门、多角色（管理员/经理/员工/访客）的权限隔离，每个角色拥有不同的菜单、页面和按钮操作权限。 |
| 规模指标 | 50+ 路由页面、12 种角色、200+ 权限点、日均 5000+ 用户访问 |
| 技术栈 | Vue 3 + Vue Router 4 + Pinia + TypeScript + Element Plus + Webpack 5 |
| 核心难点 | ① 动态路由刷新丢失导致 404；② 按钮级权限分散在组件中难以统一管理；③ 多角色切换时路由表清理不彻底 |
| 面试高频追问 | 🔹 刷新后动态路由恢复的具体实现？ 🔹 按钮级权限用指令还是组件封装？优劣对比？ 🔹 权限树的数据结构如何设计？后端接口返回格式？ 🔹 路由表清理时如何避免「页面残留」？ |
| 可迁移回答话术 | 「我们采用 + 权限树双持久化 方案，刷新时从 localStorage 恢复权限数据，在 beforeEach 中重新 addRoute。按钮权限通过 自定义指令 v-permission 统一控制，权限码以枚举形式维护在单独文件中。遇到角色切换时，调用 resetRouter 清空动态路由 并重新注入，确保路由表纯净。」 |
💡 本章核心速记：
- 守卫三分类：全局（beforeEach/beforeResolve/afterEach）、路由独享（beforeEnter）、组件内（beforeRouteEnter/Update/Leave）
- 执行顺序口诀：「全局→路由→组件，beforeResolve 在确认前，afterEach 在更新后」
- 权限控制四步：登录鉴权 → 角色判断 → 动态注入 → 注销清理
- 避坑三要素：next 必须调用、动态路由防重复、刷新防丢失
- 优化两板斧：懒加载分割 + 预加载预热