@[toc]
前言：路由乱，本质是“页面结构没设计”
很多项目后期路由文件看起来像这样：
- 一个文件 1000 行
- Layout 套 Layout
- 新页面不知道该放哪
说白了就是一句话：
路由和页面结构是“边写边凑”的。
一、Layout 的职责一定要收紧
一句话定义 Layout：
只管结构，不管业务。
Layout 里应该有什么？
- Header
- Sidebar
- Footer
<router-view />
不应该有什么？
- 接口请求
- 权限判断
- 业务状态
二、最推荐的 Layout 结构
Layout ├─ Header ├─ Sidebar └─ MainContent (router-view)这个结构的好处是：
- 所有页面共享结构
- 页面只关心自己内容
三、路由如何“自动套 Layout”
{path:'/',component:MainLayout,children:[{path:'dashboard',component:Dashboard}]}这样做的本质是：
Layout 是路由的一部分，而不是页面自己引的组件
四、多 Layout 怎么处理？
真实项目里几乎一定有：
- 登录页 Layout
- 后台 Layout
- 全屏页 Layout
解决方式非常简单：
{path:'/login',component:BlankLayout},{path:'/',component:AdminLayout,children:[...]}你会发现：
- 页面不需要知道自己用什么 Layout
- 路由一眼就能看懂结构
五、菜单一定是“路由的衍生物”
不要自己维护一份菜单数据。
constmenus=routes.map(route=>({title:route.meta.title,path:route.path}))这样做的好处是：
- 权限变了，菜单自然变
- 不存在“菜单有，页面进不去”
六、路由文件一定要拆模块
router/ ├─ index.ts ├─ modules/ │ ├─ user.ts │ ├─ order.ts │ └─ admin.ts每个模块只关心自己：
- 新功能 = 新文件
- 删除模块 = 删文件
七、总结一句话
路由是页面结构的说明书，不是业务代码的垃圾桶。
