第46篇：Vue3 Router工程化进阶——懒加载+嵌套路由+全局守卫+权限控制
前言
上一篇我们掌握了路由基础用法，足够实现简单页面跳转。
但企业中后台项目、大型官网绝对不止这点内容：
页面过多导致首屏加载缓慢（需要懒加载）
菜单嵌套、页面层级复杂（需要嵌套路由）
未登录禁止访问首页、详情页（需要路由守卫）
不同角色展示不同页面（权限路由控制）
本篇一次性讲完Vue Router 所有高阶能力，直接带你写出企业标准路由架构。
一、路由懒加载（首屏性能优化必备）
传统全部导入会导致首屏打包体积过大、加载卡顿。
懒加载原理：访问哪个页面，才加载哪个页面的JS代码，极致优化首屏速度。
const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue') // 懒加载写法 }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') } ]
企业项目强制全部使用懒加载，是基础性能优化规范。
二、嵌套路由（多级菜单核心）
真实项目大量存在页面嵌套：首页嵌套工作台、个人中心嵌套资料/密码修改。
通过children实现嵌套路由。
{ path: '/user', name: 'User', component: () => import('@/views/User.vue'), // 子路由 children: [ { path: 'info', // 完整地址 /user/info component: () => import('@/views/UserInfo.vue') }, { path: 'password', component: () => import('@/views/Password.vue') } ] }
注意：子路由path不需要加 /，自动拼接父级路径。
三、路由重定向 + 404页面（项目标配）
防止用户输入错误地址、空白页面，所有项目必须配置。
// 根路径重定向 { path: '/', redirect: '/home' }, // 404兜底页面 { path: '/:pathMatch(.*)*', redirect: '/404' }
四、全局路由守卫（登录权限拦截核心）
全局前置守卫 beforeEach：每次路由跳转前触发，用来做登录拦截、权限判断。
业务场景：未登录用户只能访问登录页，禁止进入首页、详情页。
router.beforeEach((to, from, next) => { // 获取本地登录token const token = localStorage.getItem('token') if(token){ // 已登录直接放行 next() }else{ // 未登录，判断是否是白名单 if(to.path === '/login'){ next() }else{ // 拦截跳转登录页 next('/login') } } })
守卫三个参数含义（面试必背）
to：即将要进入的目标路由
from：当前正要离开的路由
next：放行函数，必须执行，否则页面卡死
五、路由权限控制（中后台核心）
企业管理系统核心功能：不同角色看到不同页面。
实现思路：
登录后获取用户角色权限
根据角色筛选可访问路由表
动态 addRoute 挂载路由
这是中级前端必备的动态路由权限方案。
六、路由缓存（keep-alive）
解决页面跳转数据刷新、状态丢失问题。
<keep-alive> <router-view></router-view> </keep-alive>
缓存页面状态，返回上一页不重新请求数据，体验大幅提升。
七、面试高频路由问答（满分总结）
1. 路由懒加载的作用？
拆分打包文件、减小首屏体积、提升首屏加载速度、优化用户体验。
2. hash 和 history 区别？
hash带#，无需后端配置；history地址干净，需要后端配置兜底，否则刷新404。
3. 路由守卫的作用？
全局监控路由跳转，实现登录拦截、页面权限控制、页面跳转逻辑统一处理。
4. params 和 query 区别？
query地址栏可见、刷新不丢失；params更优雅，动态路由传参首选。
八、本篇结语
到这里，你彻底学完了Vue3 全套工程化核心：
基础语法 → 组件化 → 组合式API → 生命周期 → 响应式 → 计算/监听 → 网络请求 → 跨域 → 路由架构 → 权限控制 → 性能优化。
46篇完整体系，已经完全对标初级前端工程师全部技术栈，可独立开发、可面试、可写简历、可承接企业项目。