第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篇完整体系已经完全对标初级前端工程师全部技术栈可独立开发、可面试、可写简历、可承接企业项目。