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 中只做三件事
- 页面结构
- 插槽
- 通用 UI（Header / Footer）
<template> <Header /> <router-view /> </template>五、为什么 Layout 一定要放在路由层？
因为这样可以：
- 动态切换布局
- 权限与布局解耦
- 路由层表达页面结构
六、多 Layout 场景实战
{path:'/admin',component:AdminLayout,children:adminRoutes}不同角色看到不同布局，不用改页面代码。
七、Layout + 权限的组合优势
- Layout 控制“长什么样”
- Router 控制“能不能进”
- 页面只关心业务
八、小结
Layout 是 UI 骨架，Router 是应用骨架。
这两个分清楚，项目可维护性直接上一个台阶。