Vue Router模块化配置的核心是按业务拆分路由表，推荐src/router/下设index.js（主入口）、modules/（函数式子模块）、guard/（守卫）三层结构，路由动态注入、异步加载、布局嵌套与命名规范统一。
Vue Router 模块化配置的核心是把庞大路由表按业务或功能拆解，避免 routes 数组堆在单个文件里导致维护困难、加载臃肿、协作冲突。结构设计的关键不是“怎么分”，而是“分得清、引得对、挂得稳”。
目录结构要体现职责分离
推荐在 src/router/ 下采用三层组织：
- index.js：路由主入口，只做初始化（创建 Router 实例、注入全局中间件、设置基础模式）和聚合；不写具体页面路由
-
modules/ 文件夹：每个子模块一个 JS 文件，例如
user.js、report.js、system.js；每个文件导出一个函数，接收children数组并往里 push 自己的路由项 - guard/（可选）：存放路由守卫逻辑，如权限校验、登录拦截，避免散落在各模块中
模块文件用函数式注册，不直接导出路由数组
每个模块文件（如 src/router/modules/report.js）应导出一个函数，而非静态数组。这样能确保路由被动态注入到指定父级容器中，支持嵌套路由结构复用：
- 函数接收一个
children数组作为参数，内部调用push()添加自己的子路由 - 路径统一以父级为基础（如
/report），子路由用相对路径（list、create），避免硬编码完整路径 - 组件采用异步 import，例如
component: () => import('@/views/report/List.vue')，实现按需加载
根路由必须明确承载布局与嵌套关系
主 index.js 中定义的根路由不能只是空壳，而应是一个带 children 的布局容器：
立即学习“前端免费学习笔记（深入）”；
- 使用
path: '/'对应一个 Layout 组件（如Layout.vue），它内部包含固定 Header/Sidebar + 一个<router-view> - 所有业务模块都注入到这个 Layout 的
children中，自然形成二级路由体系 - 404 路由建议放在最后，用通配符
path: '/\*'，且独立于业务模块之外，单独配置
路由命名与参数约定要统一
模块间协作依赖清晰的命名规范：
- 每个路由必须设
name，格式建议为模块名-页面名（如report-list、user-detail），便于编程式导航和router.push({ name: 'report-list' }) - 动态参数统一用
:id、:slug等语义化占位符，避免混用:userId和:id - meta 字段用于携带非路由逻辑信息，比如
{ requireAuth: true, title: '报表列表' }，后续可在全局守卫或 Layout 中统一读取
