Vue 项目路由 + 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 是应用骨架。

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