在 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 不一致
