后台管理模版geeker-admin从0-1解构（页面布局详解-1）

昨天太忙了，也就偷了个懒没有继续更新，今天一大早醒来发现下雨了，也不能出门了，想想就更新一篇把。

好了，言归正传，上次我们说到了登录功能，登录成功后就进去了首页，现在大家就看到了基本布局。

上次我们说到，所有的动态路由都添加在了layout组件下，所以直接打开layout查看，路径为 layouts/index.vue

此处逻辑很简单就不细说了，就是通过 component 动态加载组件下边的四种布局结构。

const LayoutComponents: Record<LayoutType, Component> = {
  vertical: LayoutVertical,
  classic: LayoutClassic,
  transverse: LayoutTransverse,
  columns: LayoutColumns
};

大家可以发现，默认加载的是  vertical: LayoutVertical  组件，所以我们打开这个文件查看一下。

基本布局就是下边这样的。

<el-container class="layout">
    <el-aside>
        logo和菜单
     </el-aside>

    <el-container>
        头部、主体内容、底部
    </el-container>
</el-container>

1.菜单分析

<el-menu
     :router="false"
     :default-active="activeMenu"
     :collapse="isCollapse"
     :unique-op