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

文章目录

• • [一、Layout 的真正职责](#一、Layout 的真正职责)
  • [二、推荐的 Layout 结构](#二、推荐的 Layout 结构)
  • [三、路由如何选择 Layout？](#三、路由如何选择 Layout？)
  • [四、Layout 中只做三件事](#四、Layout 中只做三件事)
  • [五、为什么 Layout 一定要放在路由层？](#五、为什么 Layout 一定要放在路由层？)
  • [六、多 Layout 场景实战](#六、多 Layout 场景实战)
  • [七、Layout + 权限的组合优势](#七、Layout + 权限的组合优势)
  • 八、小结

如果你发现：

• 页面里充满 Header / Sidebar
• 登录页和业务页结构混在一起
• 一个页面换布局要改一堆代码

那说明：Layout 没设计好。

一、Layout 的真正职责

一句话总结：

Layout 负责页面结构，不负责业务。

二、推荐的 Layout 结构

layouts/
├── MainLayout.vue
├── BlankLayout.vue
├── AdminLayout.vue

三、路由如何选择 Layout？

{
  path: '/',
  component: MainLayout,
  children: [...]
}

登录页：

{
  path: '/login',
  component: BlankLayout,
  children: [...]
}

四、Layout 中只做三件事

1. 页面结构
2. 插槽
3. 通用 UI（Header / Footer）

<template>
  <Header />
  <router-view />
</template>

五、为什么 Layout 一定要放在路由层？

因为这样可以：

• 动态切换布局
• 权限与布局解耦
• 路由层表达页面结构

六、多 Layout 场景实战

{
  path: '/admin',
  component: AdminLayout,
  children: adminRoutes
}

不同角色看到不同布局，不用改页面代码。

七、Layout + 权限的组合优势

• Layout 控制"长什么样"
• Router 控制"能不能进"
• 页面只关心业务
  

八、小结

Layout 是 UI 骨架，Router 是应用骨架。

这两个分清楚，项目可维护性直接上一个台阶。