0 环境
1 文档
2 思考：跳转到home/index都做了什么
之前讲到了初始化动态路由、获得了token，并且通过了路由拦截。然后到了跳转到指定path。如下图：渲染了首页的内容，但是它们之间的布局是啥子时候产生的呢？
3 layout做了啥
我们的疑问是：首页结构是哪里布局的，这里就牵扯到初始化动态路由了，初始化路由里的目的就是将路由加载到layout，可参考如下代码：而一旦我访问了首页，那么layout组件必然会被渲染，因为是首页的父路由。
{
path: "/layout",
name: "layout",
component: () => import("@/layouts/index.vue"),
// component: () => import("@/layouts/indexAsync.vue"),
redirect: HOME_URL,
children: [
path: "/home/index",
....
]
}
现在进入 @/layouts/index.vue 中，如下图：这里是一次性加载 LayoutComponents。
往下翻找到LayoutComponents，鼠标悬浮在Record上，如下图所示，还有补充一点：Record<K,T> 用于创建一个对象类型，其属性的键的类型是 K，值的类型是 T。这里对K做了限制了，只能这4种类型。这4种类型对应的含义是啥呢。
如下图所示：点开右上角衣服按钮，布局类型就是对应的它。
在看 LayoutComponents[layout] 里的 layout，layout默认是classic，就是经典模式，但是我更喜欢vertical(纵向模式)，我默认是后者，其实它两区别不大，如下图就是一个竖线的差别。接着往下说：这里我得到的组件是LayoutVertical。
光标放在LayoutVertical上，ctrl + 左键，进到LayoutVertical/index.vue。gitee源码具体位置。
4 LayoutVertical如何纵向布局的
大体布局如下图：
它的布局是从哪里来的呢，请先打开element-plus，然后找到基础组件下的Container 布局容器，具体链接：Container 布局容器。一直翻到如下图的位置：
默认是有页脚的这张。
上面两张图一对照，1对应的是aside，2对应的是header，3对应的是main和footer，在结合下图的说明。
5 小结
token设置好、动态路由加载成功...、路由push到首页时，也通过了路由拦截，正式的访问path了，假如是一个path，那还好，若是动态路由里有多个可访问的path呢，总不能一个个手输+回车吧，是不是要有一个区域管理path，那么path内容的展示是不是也要有个区域用来专门展示。。。首页的布局方式分纵向、横向、经典、分栏，我喜欢默认设置为纵向，题外话：经典和纵向布局大差不差的，代码中是通过useGlobalStore里的layout的值，来控制的。一旦它发生变化，那么组件会重新加载，布局随着会被实时改变。后面又具体介绍了，纵向布局的划分：侧边栏、顶栏、主要区域、底栏，以及找到对应的UI框架对应的组件介绍和案例。
