《Vue 项目路由 + Layout 的最佳实践》

@[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

每个模块只关心自己：

• 新功能 = 新文件
• 删除模块 = 删文件

七、总结一句话

路由是页面结构的说明书，不是业务代码的垃圾桶。