Vue3路由懒加载与守卫需协同使用：懒加载通过动态import()按需加载组件，守卫（如router.beforeEach）拦截导航实现权限控制，二者结合兼顾性能与安全。
Vue3 路由懒加载和路由守卫不是两个孤立功能，而是配合使用的典型组合：懒加载控制资源何时加载，守卫决定是否允许加载、跳转或展示。两者结合能兼顾性能与安全。
路由懒加载：按需加载组件，减少首屏体积
懒加载本质是用动态 import() 替代静态 import，让组件只在路由匹配时才加载。Vue Router 4 原生支持该写法，无需额外配置。
- 写法统一：组件字段必须是函数，返回 Promise，例如
component: () => import('@/views/User.vue') - 推荐搭配命名路由使用，便于编程式导航和参数传递，如
router.push({ name: 'user', params: { id: 1 } }) - 可配合 Webpack 或 Vite 的魔法注释做 chunk 命名，提升调试可读性：
import(/* webpackChunkName: "user" */ '@/views/User.vue') - 注意不要在守卫中提前执行
import()，否则会失去懒加载意义；应交由 Vue Router 内部触发
路由守卫：拦截导航，实现权限控制逻辑
Vue Router 4 的守卫分三类（全局、独享、组件内），全部支持 Composition API 的 useRouter 和 useRoute，且不再强制调用 next()，改用返回值控制流程。
- 全局前置守卫（
router.beforeEach）最常用，适合登录校验、token 检查、角色白名单过滤 - 守卫中可访问
to.meta.roles（需提前在路由定义里声明），对比当前用户角色，决定是否放行 - 拒绝导航时，返回
{ name: 'login' }或/login?redirect=${to.fullPath}实现带参跳转 - 异步操作（如请求用户信息）直接 await，守卫自动等待 Promise 完成，不用手动管理状态
懒加载 + 守卫的典型配合场景
真实项目中，这两者常协同工作，比如后台系统登录后才加载权限路由、未登录时禁止访问任何业务页。
立即学习“前端免费学习笔记（深入）”；
- 登录页、404 等基础路由保持静态引入，确保快速响应；其他页面全部懒加载
- 守卫中判断 token 是否有效，无效则中断导航并跳转登录，避免无意义加载业务组件
- 动态添加路由（
router.addRoute()）前，先通过守卫确认权限，再注册对应懒加载路由，防止未授权路由被意外注册 - 结合
meta字段（如meta: { requiresAuth: true, roles: ['admin'] }），让守卫逻辑更清晰、可复用
常见避坑点
实际开发中容易忽略细节，导致懒加载失效或守卫不生效。
- 组件路径别写错，动态 import 的路径是相对
src的绝对路径，不是相对于 router 文件 - 守卫返回值必须明确，返回
false表示取消导航，返回字符串或对象表示重定向，不返回则默认放行 - 嵌套路由下，子路由也需各自设置懒加载，父组件不负责加载子组件
- 服务端渲染（SSR）环境下，动态 import 需配合
defineAsyncComponent使用，避免 hydration 不一致
