一整体布局
![](https://i-blog.csdnimg.cn/blog_migrate/daf17d10159222d9ad6d6af8e4cd0641.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8ac71edf4d263e8be87e01a4378583c6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/02084958010ba5d1ee10850c144c2f4e.png)
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
1.1 整体布局
![](https://i-blog.csdnimg.cn/blog_migrate/c92bf297d7eff0447942d5fcde0eceab.png)
![](https://i-blog.csdnimg.cn/blog_migrate/20fd7dc086c8d01c9f1fb446038d9350.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9235e974cdd0a9b7d547a2d42daa59b0.png)
1.2 添加样式
![](https://i-blog.csdnimg.cn/blog_migrate/1050428de07a9eea0407e58b6ff702ac.png)
![](https://i-blog.csdnimg.cn/blog_migrate/93e5e0d619b2af7e1156d7aa0b2ddcff.png)
发现下边并没有撑满整个盒子,先检查元素
![](https://i-blog.csdnimg.cn/blog_migrate/720329b60ee32cceac1d21a573ed3805.png)
解决:
添加一个class, 在外围添加样式
![](https://i-blog.csdnimg.cn/blog_migrate/d2f0906c1e321ca3babeb88ab53f7064.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b56cd8839072ab367acef1c0bde99252.png)
.el-header {
background-color: #373d3f;
}
.el-aside {
background-color: #333744;
height: 100vh;
}
.el-main {
background-color: #eaedf1;
}
二 header的布局
最简单的是使用flex布局
![](https://i-blog.csdnimg.cn/blog_migrate/13125ecf4d1e26f3412d68dabb4efbd3.png)
2
![](https://i-blog.csdnimg.cn/blog_migrate/40a093957174ec2ab75b26fdd18e9761.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2916aabffb8af701f5297e4f3165804f.png)
3 文件居中对齐
对父盒子设置 flex 对齐方式
![](https://i-blog.csdnimg.cn/blog_migrate/469c46ea9636fd3aea0f04dcf52bd789.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2e2692d05b05cc31aa4572061343ef79.png)
element-ui设置按钮大小
<el-button type="info" size="mini" style="height:40px;margin-top:10px"> 退出</el-button>
设置宽高需要把尺寸改为最小给el-button加size=“mini” 就可以设置宽高了width height
或者使用button,不用element-ul
参考:
三 左侧菜单布局
![](https://i-blog.csdnimg.cn/blog_migrate/0cf15efc5cc3d6b8937de70ab8b96216.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ea741d157585dd3762e96c33155218db.png)
3.1 导入代码
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
1.1 修改背景
![](https://i-blog.csdnimg.cn/blog_migrate/ca4203460d22fc95d3411205a856b09b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e29bb721ac5a5e622c59bf42af52b7b1.png)
1.2 设置两个菜单,将没用的删除
![](https://i-blog.csdnimg.cn/blog_migrate/794310189c6d02363afef4e3347157c0.png)
这样二级菜单并没有图标: 将template 放入二级菜单(el-menu-item )这就有了
![](https://i-blog.csdnimg.cn/blog_migrate/155867d7737391f5fda0cca053fc0652.png)
![](https://i-blog.csdnimg.cn/blog_migrate/60d55d0e0fc73b6a5cbc1aab0866a0f9.png)
<el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
<!-- 一级菜单 -->
<el-submenu :index="1">
<!-- 一级菜单模板 -->
<template slot="title">
<!-- 图标 -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>导航1</span>
</template>
<!-- 二级子菜单 -->
<el-menu-item :index="1-1">
<!-- 二级菜单模板 -->
<template slot="title">
<!-- 图标 -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>导航2</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
![](https://i-blog.csdnimg.cn/blog_migrate/f3a8ee886e2effd282b06866c90d7079.png)
3.2通过接口获取菜单数据
3.2.1 拦截器
往其余接口的请求头上添加一个token ,用拦截器去做
![](https://i-blog.csdnimg.cn/blog_migrate/556439eb294c62de1ecffbdb886e0532.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f42f9963ea4545fdf8e8208d7b2edce5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2823b104145be8c9a6fa0ef961bb2af2.png)
headers 不是header
3.2.2 获取左侧菜单数据
![](https://i-blog.csdnimg.cn/blog_migrate/d718b0f2a0ce4cc6d930b5a2eb6f52ad.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d9a0a352bdac5c4ae71db6bb744dc453.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a9025988f17541fd469c80b306923684.png)
将获取到的数据。立即挂载到自己的data上边
![](https://i-blog.csdnimg.cn/blog_migrate/c2a05f601e74971855f607dc2364211d.png)
返回结果:
{"data":[{"id":125,"authName":"用户管理","path":"users","children":[{"id":110,"authName":"用户列表","path":"users","children":[],"order":null}],"order":1},{"id":103,"authName":"权限管理","path":"rights","children":[{"id":111,"authName":"角色列表","path":"roles","children":[],"order":null},{"id":112,"authName":"权限列表","path":"rights","children":[],"order":null}],"order":2},{"id":101,"authName":"商品管理","path":"goods","children":[{"id":104,"authName":"商品列表","path":"goods","children":[],"order":1},{"id":115,"authName":"分类参数","path":"params","children":[],"order":2},{"id":121,"authName":"商品分类","path":"categories","children":[],"order":3}],"order":3},{"id":102,"authName":"订单管理","path":"orders","children":[{"id":107,"authName":"订单列表","path":"orders","children":[],"order":null}],"order":4},{"id":145,"authName":"数据统计","path":"reports","children":[{"id":146,"authName":"数据报表","path":"reports","children":[],"order":null}],"order":5}],"meta":{"msg":"获取菜单列表成功","status":200}}
3.3 渲染数据
![](https://i-blog.csdnimg.cn/blog_migrate/64c55d0e77f691d3827efb12ebae3108.png)
{
"data":
{
"id": 101,
"authName": "商品管理",
"path": null,
"children": [
{
"id": 104,
"authName": "商品列表",
"path": null,
"children": []
}
]
}
"meta": {
"msg": "获取菜单列表成功",
"status": 200
}
}
3.3.1 先渲染一级菜单
![](https://i-blog.csdnimg.cn/blog_migrate/d14516011c9b31c727ea508fb31cd1ca.png)
1 现在有一个问题: 一点击用户管理,其他一级分类页打开了。是因为 index是相同的
每一个菜单应该有一个独属于自己的index
![](https://i-blog.csdnimg.cn/blog_migrate/d8fccd12c2e1c4877c1585fc44117798.png)
修改:
![](https://i-blog.csdnimg.cn/blog_migrate/f30aa8820378c70bf12cfbd5258264d4.png)
2 控制台还在报错,因为index只接受字符串,不接收 数字
修改:
![](https://i-blog.csdnimg.cn/blog_migrate/f39fa0172fe3d6d7b64bf2c6982d76d7.png)
3.3.2 渲染二级菜单
![](https://i-blog.csdnimg.cn/blog_migrate/2d774176b74cf556acae5489df45bb7c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4a3c2d527df2a9232d7d9e753048a2f5.png)
<!-- 侧边栏菜单区域 -->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" :unique-opened="true"
:collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="activePath">
<!-- 一级菜单 -->
<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
<!-- 一级菜单的模板区域 -->
<template slot="title">
<!-- 图标 -->
<i :class="iconsObj[item.id]"></i>
<!-- 文本 -->
<span>{{ item.authName }}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item :index="'/' + sunItem.path" v-for="sunItem in item.children" :key="sunItem.id"
@click="saveActivePath('/' + sunItem.path)">
<template slot="title">
<!-- 二级菜单的模板区域 -->
<i class="el-icon-menu"></i>
<!-- 图标 -->
<span>{{ sunItem.authName }}</span>
<!-- 文本 -->
</template>
</el-menu-item>
</el-submenu>
</el-menu>
报错:
![](https://i-blog.csdnimg.cn/blog_migrate/76e6d284f23da38195527d51351a8b43.png)
![](https://i-blog.csdnimg.cn/blog_migrate/57938afe42b32e2def865a959e830584.png)
报没有注册进去
![](https://i-blog.csdnimg.cn/blog_migrate/ee9b6082b9df1e470e4775f9f458c9a2.png)
4 左侧菜单格式美化
4.1 点击变化颜色
![](https://i-blog.csdnimg.cn/blog_migrate/04e63d7d57e9f25cda825fd2060e0141.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ebead4032b34e5662ef8c82cd34d2c43.png)
active-text-color="#ffd04b"
4.2 二级菜单图标修改
都改成一样的图标
![](https://i-blog.csdnimg.cn/blog_migrate/479c445e2324b89cad0b5b587c0855a0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fc0351fbaca9df61f1b4c3c89ac69bb2.png)
4.3 一级菜单图标
每个菜单的图片是不一样的,怎么按顺序吧图标显示出来?
![](https://i-blog.csdnimg.cn/blog_migrate/56ae04e407fdf81c9cab96348fe6e81d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/99bb34274693c7ad0d23cf180241db25.png)
给每个图标添加一个间距
![](https://i-blog.csdnimg.cn/blog_migrate/00e887877e14009314d25df4df142d2c.png)
5 左侧菜单优化
5.1 只允许展开一个菜单, 如果你展开其他的菜单,当前的菜单就会关闭,只保留一个
![](https://i-blog.csdnimg.cn/blog_migrate/0b6831b4b20c5e31bb243a46d1cdd85d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/41c81fd8bdb54cef4d4758c6f7c77431.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cf58bb1faec34e03a152c1187d2e2b63.png)
要加:, 不加冒号里边就是个字符串, 加:就是一个布尔值
:unique-opened="true"
5.2左侧菜单没对齐
![](https://i-blog.csdnimg.cn/blog_migrate/30ec0325356f024feffc5cd6afc17059.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1dea9ddd85f063a8e9ddc912be89c953.png)
只需要把border-right 设置为0
![](https://i-blog.csdnimg.cn/blog_migrate/6d2def7a7ec0f6ac892d0463d060585c.png)
6 实现左侧菜单的折叠
![](https://i-blog.csdnimg.cn/blog_migrate/ebe93c0f1fe3c80b4696f59771ce9a3c.png)
6.1 编写div
![](https://i-blog.csdnimg.cn/blog_migrate/162854a5b533f25122f8c516a647f338.png)
<div class="toggle-button">|||</div>
![](https://i-blog.csdnimg.cn/blog_migrate/d42b216f77a599b20ff0665569f64044.png)
.toggle-button {
background: #4a5064;
font-size: 10px;
text-align: center;
line-height: 24px;
color: #fff;
letter-spacing: 0.2em;
cursor: pointer;
}
6.2 添加点击事件
![](https://i-blog.csdnimg.cn/blog_migrate/3cef20bbb9ddaecd493f45c74d4b5187.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2930a38a376ea849e655dadd510c4770.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9471e11bd3d57be1003ec76f0f801bc2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4b519048e1fe07f9369d9c8ecc67ca14.png)
折叠效果太丑了(很卡),为了使动画效果更佳流畅,关闭掉
6.3 关闭动画效果
![](https://i-blog.csdnimg.cn/blog_migrate/9cd0bd42f97b1770e66038462a37c995.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e7553a42850973ff966b6d2333fc22ee.png)
:collapse-transition="false"
6.4 导航栏缩小
![](https://i-blog.csdnimg.cn/blog_migrate/2fc98ec95f954a3e61d352666a17520f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0f78f3660803cd76d9126737fe14635b.png)
现在不缩小的原因是我们给了一个固定宽度。
我们只需要 isCollapse: true的时候,宽度变小; 当isCollapse:false的时候,在重置成200
![](https://i-blog.csdnimg.cn/blog_migrate/e050d13ac7ce8efd23c86cd8255f0894.png)
<el-aside :width="isCpllapse? '64px' : '200px'">
总体代码
<template>
<el-container class="home-container">
<!-- 头部区域 -->
<el-header>
<div>
<img src="~assets/manager.jpg" alt="" />
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<el-container>
<!-- 侧边栏 -->
<el-aside :width="isCollapse ? '61px' : '200px'">
<div class="toggle-button" @click="toggleCollpase">|||</div>
<!-- 侧边栏菜单区域 -->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" :unique-opened="true"
:collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="activePath">
<!-- 一级菜单 -->
<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
<!-- 一级菜单的模板区域 -->
<template slot="title">
<!-- 图标 -->
<i :class="iconsObj[item.id]"></i>
<!-- 文本 -->
<span>{{ item.authName }}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item :index="'/' + sunItem.path" v-for="sunItem in item.children" :key="sunItem.id"
@click="saveActivePath('/' + sunItem.path)">
<template slot="title">
<!-- 二级菜单的模板区域 -->
<i class="el-icon-menu"></i>
<!-- 图标 -->
<span>{{ sunItem.authName }}</span>
<!-- 文本 -->
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 右侧内容主题 -->
<el-main>
<!-- 路由占位符 -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: 'Home',
data() {
return {
// 左侧菜单数据
menuList: [],
iconsObj: {
// 一级菜单的icon图标
147: 'el-icon-magic-stick',
125: 'iconfont icon-users',
103: 'iconfont icon-tijikongjian',
101: 'iconfont icon-shangpin',
102: 'iconfont icon-danju',
145: 'iconfont icon-baobiao'
},
isCollapse: false, // 是否折叠属性
activePath: '/welcome',
welcome: {
authName: '欢迎光临',
id: 147,
order: 1,
path: '/welcome',
children: [
{
authName: 'Welcome',
id: 124,
order: 1,
path: 'welcome',
children: []
}
]
}
}
},
created() {
this.getMenuList()
console.log(this.activePath)
const path = window.sessionStorage.getItem('activePath')
if (path) {
this.activePath = path
} else {
this.activePath = '/welcome'
}
},
methods: {
logout() {
window.sessionStorage.clear()
this.$router.push('/login')
},
// 获取所有的菜单
async getMenuList() {
const { data: res } = await this.$http.get('/menus')
if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
this.$message.success(res.meta.msg)
res.data.unshift(this.welcome)
this.menuList = res.data
console.log(res, 'menus')
},
// 点击按钮,切换菜单的折叠和展开
toggleCollpase() {
this.isCollapse = !this.isCollapse
},
saveActivePath(activePath) {
window.sessionStorage.setItem('activePath', activePath)
this.activePath = activePath
// console.log(this.$route.path)
}
}
}
</script>
<style lang="less" scoped>
.hwelcome {
color: #fff;
font-size: 15px;
height: 25px;
text-align: center;
background: green;
span {
margin-left: 10px;
}
}
.home-container {
height: 100%;
}
.el-header {
display: flex;
justify-content: space-between;
padding-left: 0;
background-color: #373d3f;
align-items: center;
color: #fff;
font-size: 20px;
>div {
display: flex;
align-items: center;
img {
width: 60px;
height: 60px;
border-radius: 50%;
}
span {
margin-left: 15px;
}
}
}
.el-aside {
background-color: #333744;
.el-menu {
border-right: none;
}
}
.el-main {
background-color: #eaedf1;
}
.iconfont {
padding-right: 10px;
}
.toggle-button {
background: #4a5064;
font-size: 10px;
text-align: center;
line-height: 24px;
color: #fff;
letter-spacing: 0.2em;
cursor: pointer;
}
</style>
7实现首页的路由重定向
![](https://i-blog.csdnimg.cn/blog_migrate/7bb8980bf2cf21956dcf6c44d4e931e5.png)
默认是成功之后默认是跳转到 /home , 现在是重定向到了/welcome.同时在主体区域展示 welcome
首先 我们需要定义一个welcome的组件,然后再main的这个地方放一个占位符
需要再home组件中在嵌套一个welcome组件
7.1 建立welcome组件
![](https://i-blog.csdnimg.cn/blog_migrate/ceccac2b07c905788b490fdcb9f88867.png)
7.2 配置路由
![](https://i-blog.csdnimg.cn/blog_migrate/df21d341a9954389e84a0728fb818426.png)
重定向组件: 只要你访问了/login 就重定向到 /welcome
welcome是home的一部分。所以在children里边
![](https://i-blog.csdnimg.cn/blog_migrate/b89da7d523563754723a747cb44dd39f.png)
带/ 都方便
![](https://i-blog.csdnimg.cn/blog_migrate/846109836c04d55be3f1e30ed1432dd0.png)
7.3 放一个路由占位符
![](https://i-blog.csdnimg.cn/blog_migrate/f7f6db05402fb4d625e586a30d9945ae.png)
![](https://i-blog.csdnimg.cn/blog_migrate/40dbb3094f50c7cb47b85624cc104308.png)
8左侧菜单改为路由连接
把二级链接添加
![](https://i-blog.csdnimg.cn/blog_migrate/3e1b85b3d25590f9fa9aa834cbcc1a73.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3bde3037014973737a4625c7bc32cd47.png)
根据 index = item.id 来进行跳转 ,但是拿id跳转并不合适,应该用path进行跳转
![](https://i-blog.csdnimg.cn/blog_migrate/cbcef8da4251be5875b86c380566d9d3.png)
修改:
![](https://i-blog.csdnimg.cn/blog_migrate/9efa9f02f6dd4f6ae38c49e4e12bded6.png)