[TOC] ## 4.1整体布局 在home.vue 框架 编辑 布局容器**组件**：[element-cn.eleme.io/#/zh-CN/component/container](http://element-cn.eleme.io/#/zh-CN/component/container) 整体布局:先上下划分，再左右划分。 ~~~ <el-container> <!--头部区域--> <el-header></el-header> <el-container> <!--侧边栏区域--> <el-aside></el-aside> <!--右侧主体区域--> <el-main></el-main> </el-container> </el-container> ~~~  ## 4.2左侧菜单布局 菜单分为二级，并且可以折叠。 导航功能的菜单**组件**：[element-cn.eleme.io/#/zh-CN/component/menu](http://element-cn.eleme.io/#/zh-CN/component/menu) ~~~ <el-menu> <el-submenu > <!--这个template是一-级菜单的内容模板--> <i class="el-icon-menu"></i> <span>一级菜单</span> <!--在一级菜单中，可以嵌套二级菜单--> <el-menu-item> <i class="el-icon-menu"></ i> <span slot="title">二级菜单</span> </el-menu-item> </el-submenu> </el-menu> ~~~  ## 4.3通过接口获取菜单数据 通过 axios 请求拦截器添加 token ,保证拥有获取数据的权限。 ~~~ // axios请求拦截 axios.interceptors.request.use(config => { //为请求头对象，添加Token验证的Authorization字段 config.headers.Authorization = window.sessionStorage.getItem('token') return config }) ~~~