Home.vue
<!-- -->
<template>
<el-container class="home-container">
<!-- 头部 -->
<el-header>
<div>
<img src="@/assets/lanmao.png" alt="" />
<span>某系统</span>
</div>
<el-button type="info" @click="logOut">退出</el-button></el-header
>
<!-- 页面主体区域 -->
<el-container>
<!-- 侧边栏 -->
<el-aside :width="isCollapse ? '64px' : '200px'">
<div class="toggle-button" @click="toggleCollapse">|||</div>
<!-- 侧边栏菜单区域 -->
<el-menu
router
background-color="#2d3846"
text-color="#fff"
active-text-color="#e5bc70"
unique-opened
:collapse="isCollapse"
:collapse-transition="false"
>
<!-- 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
<!-- 一级菜单 -->
<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="'/' + subItem.path"
v-for="subItem in item.children"
:key="subItem.id"
>
<!-- 二级菜单模版区域 -->
<template slot="title">
<i class="el-icon-menu"></i>
<span>{{ subItem.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: '',
data() {
return {
//左侧菜单数据
menuList: [],
iconsObj: {
125: 'iconfont icon-user',
103: 'iconfont icon-tijikongjian',
101: 'iconfont icon-shangpin',
102: 'iconfont icon-danju',
145: 'iconfont icon-baobiao',
},
//是否折叠
isCollapse: false,
}
},
created() {
this.getMenuList()
},
methods: {
//退出
logOut() {
//清空token
window.sessionStorage.clear()
//跳转到登录页
this.$router.push('/login')
},
//获取左侧菜单数据
async getMenuList() {
const { data: res } = await this.$http.get('menus')
// const { data: res } = await this.$http({ url: 'menus' })
if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
this.menuList = res.data
console.log(res.data)
},
//点击按钮,切换菜单的折叠与展开
toggleCollapse() {
this.isCollapse = !this.isCollapse
},
},
}
</script>
<style lang="less" scoped>
.home-container {
height: 100%;
}
.el-header {
background-color: #555555;
display: flex;
justify-content: space-between;
padding-left: 5px;
align-items: center;
color: #fff;
font-size: 20px;
> div {
display: flex;
align-items: center;
img {
height: 50px;
width: 50px;
}
span {
margin-left: 10px;
}
}
}
.el-aside {
background-color: #2d3846;
.el-menu {
border: none;
}
}
.el-main {
background-color: #eaedf1;
}
.iconfont {
margin-right: 8px;
}
.toggle-button {
background-color: #4a5064;
font-size: 14px;
line-height: 24px;
color: #fff;
text-align: center;
letter-spacing: 0.3em;
cursor: pointer;
}
</style>