四、撸vue/cli 3.+ 的正确姿势（layout的互相嵌
1、大多数人知道layout布局
大多数人只知道layout布局，大概就是header、footer、aside、content等，但是如果content模块里还有一个子模块，而且子模块也有很多公用部分，如何做？
举个例子：
（1）一个后台管理系统内，有一个预览个人中心模块，这个个人中心也和layout类，有header、footer、aside、content
多层嵌套的模板
（2）比如一个新闻模块和权限管理模块....，很多模块，每个模块都有自己单独的头部，都有自己单独的aside侧边栏，或者锚链接等，如何实现呢？
很多朋友说，这其实不难，用一个组件就行，模块下的每个文件都引入这个组件即可，虽然确实可以这么实现，但是实现的成本可谓大大增加，其实这是一个误区。
2、layout里可以嵌套模块单独模块的layout
直接上代码，一般后台系统的模式大概如下
<template>
<a-layout>
<a-layout-header>头部</a-layout-header>
<a-layout-sider>侧边栏</a-layout-sider>
<a-layout-content >
<router-view /> 内容视图
</a-layout-content>
<a-layout-footer>底部</a-layout-footer>
</a-layout>
</template>
对应的模块news
<template>
<div>
<new-public>
这个是新闻列表、新闻详细、新增新闻等，总之所有news公用的
大部分人把它当做组件
</new-public>
<h1>这是新闻列表页面、新闻详细页、新增新闻页等</h1>
</div>
</template>
3、实际上应该提取news的layout
后台整体布局的layout
<template>
<a-layout>
<a-layout-header>头部</a-layout-header>
<a-layout-sider>侧边栏</a-layout-sider>
<a-layout-content >
<router-view /> 内容视图
</a-layout-content>
<a-layout-footer>底部</a-layout-footer>
</a-layout>
</template>
news模块单独的layout，比如叫做 newsLayout.vue
<template>
<div>
<new-public>
这个是新闻列表、新闻详细、新增新闻等，总之所有news公用的
大部分人把它当做组件
</new-public>
<router-view /> 内容视图
</div>
</template>
新闻里的vue文件应该如下写法
<template>
<h1>这是新闻列表页面、新闻详细页、新增新闻页等，简介明了</h1>
</template>
这样做的效果要比每个页面引入公用的组件要强太多了！理论上我们可以更深的层次
4、管理目录结构，管理路由
结构划分
router里的文件引用
{
path: "/",
meta: {
title: "首页"
},
component: layout, // 此处承接了所有后台页面公用的 头部、底部、侧栏等等
children: [
{
path: "/",
name: "home",
meta: {
title: "欢迎使用"
},
component: () => import("@/views/home/index.vue")
},
{
path: "/news",
meta: {
title: "新闻"
},
component: newsLayout, // 此处承接了news模块所有公用部分
children: [
{
path: "/",
name: "news",
meta: {
title: "新闻列表"
},
component: () =>
import("@/views/news/list.vue")
},
{
path: "detail/:id",
name: "news-info",
meta: {
title: "新闻详细"
},
component: () =>
import("@/views/news/info.vue")
},
...
]
}
]
},
5、拓展+特别说明
1、很多时候，我们在做一个news模块的时候，会把list文件当做模块首页。
2、我们会遇到一个问题，如果list.vue 是一个路由最终级，那后续的info.vue，edit.vue 就必须是list.vue 同级别的，这让我们很难划分他们都是属于news 这个模块下的。
3、很有可能我们的路由列表，是这样的：新闻的列表、新闻的详细、班级的列表、和班级详细全部都在一个层级，根本没有分目录，看起来特别乱，不是树结构。
要保持树结构，按照路由分组清清楚楚，那就必须给分组一个组件承载，这个承载组件其实就是模块的layout.vue
这种情况下，我们需要一个空白的承载体，也就是blank.vue，这样，我们就能无限级别的分组我们的路由
<template>
<router-view />
</template>
再回头看看我们的布局结构顺序
1.后台整体布局的layout
<template>
<a-layout>
<a-layout-header>头部</a-layout-header>
<a-layout-sider>侧边栏</a-layout-sider>
<a-layout-content >
<router-view /> 内容视图
</a-layout-content>
<a-layout-footer>底部</a-layout-footer>
</a-layout>
</template>
2.每个模块公用的空白承载组件 blank.vue
<template>
<router-view /> // 内容视图
</template>
3.新闻里的vue文件应该如下写法
<template>
<h1>这是新闻列表页面、新闻详细页、新增新闻页等</h1>
</template>
4.班级的vue文件写法如下
<template>
<h1>班级列表页面、班级详细页、班级新闻页等</h1>
</template>
5.路由结构，当然我们依然能够灵活的给每个模块添加一些特定的layout
{
path: "/",
meta: {
title: "首页"
},
component: layout, // 后台每个页面都公用的布局
children: [{
path: "/",
name: "home",
meta: {
title: "欢迎使用"
},
component: () =>
import("@/views/home/index.vue")
},
{
path: "/news",
meta: {
title: "新闻模块分组"
},
component: blank, // 用户分组的blank组件，里面只有一个rooter-view
children: [{
path: "/",
name: "nwes",
meta: {
title: "新闻列表"
},
component: () =>
import("@/views/nwes/list.vue")
},
{
path: "info/:id",
name: "nwes-info",
meta: {
title: "新闻详细"
},
component: () =>
import("@/views/nwes/info.vue")
}
]
},
{
path: "/newsRoom",
meta: {
title: "班级模块分组"
},
component: blank, // 用户分组的blank组件，里面只有一个rooter-view
children: [{
path: "/",
name: "newsRoom",
meta: {
title: "班级列表"
},
component: () =>
import("@/views/newsRoom/list.vue")
},
{
path: "info/:id",
name: "newsRoom-info",
meta: {
title: "班级详细"
},
component: () =>
import("@/views/newsRoom/info.vue")
}
]
},
]
}
