Vue Router模块化设计
Vue Router 在布局路由、模块拆分、meta 组织与权限扩展上的常见设计方式。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
- 所属 MOC: Vue MOC
- 基础概念: vue-router
- 相关实践: vue-router-guards-and-permission-control, pinia
Vue Router模块化设计
中大型 Vue 项目的路由问题，通常不在“会不会写 routes”，而在于路由表怎么拆、布局怎么组织、权限信息放哪里更稳定。
一个常见目标
让路由同时承担三件事：
- 描述页面层级
- 承载导航语义
- 为权限和菜单系统提供结构基础
常见拆分方式
布局路由 + 子路由
后台系统里很常见。外层布局承载导航框架，子路由承载具体业务页面。
按业务模块拆分路由文件
例如按 user、system、order、report 拆分，比把所有路由堆在一个文件里更稳定。
meta 适合放什么
meta 更适合放导航语义，而不是塞复杂业务逻辑。
常见内容有：
titlerequiresAuthrolekeepAlive- 菜单展示相关字段
和权限控制怎么协作
- 路由表定义结构和
meta - 守卫根据
meta判断准入规则 - pinia 持有用户与权限状态
- 菜单系统按可访问路由生成可见导航
常见误区
- 把请求逻辑和复杂判断直接写死在路由配置里
meta字段随意扩张，团队内没有统一语义- 路由结构和菜单结构长期脱节
最短记忆方式
路由模块设计的核心不是把数组拆文件，而是让页面结构、导航语义和权限规则保持同一套骨架。