《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
• 路由一眼就能看懂结构

五、菜单一定是"路由的衍生物"

不要自己维护一份菜单数据。

const menus = routes.map(route => ({
  title: route.meta.title,
  path: route.path
}))

这样做的好处是：

• 权限变了，菜单自然变
• 不存在"菜单有，页面进不去"

六、路由文件一定要拆模块

router/
 ├─ index.ts
 ├─ modules/
 │   ├─ user.ts
 │   ├─ order.ts
 │   └─ admin.ts

每个模块只关心自己：

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

七、总结一句话

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