使用Element组件库,使用Container 布局容器进行界面布局
<el-container>
<!-- 左侧菜单栏目 -->
<el-aside width="200px">
<!-- 头像 -->
<div class="user-box">
<img src="../assets/logo.png" alt="错误">
<span>欢迎</span>
</div>
<!-- 导航栏菜单 -->
<el-menu router default-active="/home" text-color="#ffff" background-color="#22262e">
<!-- 不需要折叠 -->
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">首页</span>
</el-menu-item>
<!-- 可折叠==文章管理 -->
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>文章管理</span>
</template>
<el-menu-item index="/art-cate">
<i class="el-icon-location"></i>
<span> 文章分类</span>
</el-menu-item>
<el-menu-item index="/art-list">
<i class="el-icon-location"></i>
<span>文章列表</span>
</el-menu-item>
</el-submenu>
<!-- 可折叠,用户中心 -->
<el-submenu index="3">
<template slot="title">
<i class="el-icon-location"></i>
<span>用户中心</span>
</template>
<el-menu-item index="/user-avatar">
<i class="el-icon-location"></i>
<span> 修改头像</span>
</el-menu-item>
<el-menu-item index="/user-info">
<i class="el-icon-location"></i>
<span>基本资料</span>
</el-menu-item>
<el-menu-item index="/user-pwd">
<i class="el-icon-location"></i>
<span>修改密码</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 右侧内容部分 -->
<el-container>
<!-- 顶部 -->
<el-header>Header</el-header>
<!-- 主体 -->
<el-main>
<!-- 二级路由出口 -->
<routerView></routerView>
</el-main>
<!-- 底部 -->
<el-footer>Footer</el-footer>
</el-container>
</el-container>
样式
<style lang="scss" scoped>
.el-container {
height: 100%;
.el-aside {
background-color: #23262e;
}
.el-header {
padding: 0;
display: flex;
justify-content: space-between;
background-color: #f2f2f2f2;
}
.el-main {
height: 0;
overflow-y: scroll;
}
.el-footer {
background-color: #eee;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
}
}
//
.avatar {
border-radius: 50%;
width: 35px;
height: 35px;
background-color: #fff;
margin-right: 10px;
object-fit: cover;
}
//右侧样式
.el-header {
.logo {
height: 45px;
width: 150px;
padding: 8px 0px;
user-select: none;
text-align: center;
background: url('@/assets/images/logo.png') center center / 100px no-repeat rgb(85, 85, 85);
border-radius: 3px;
margin-left: 15px;
}
}
// 左侧边栏用户信息区域
.user-box {
height: 70px;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
user-select: none;
img {
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #fff;
margin-right: 15px;
object-fit: cover;
}
span {
color: white;
font-size: 12px;
}
}
// 侧边栏菜单的样式
.el-aside {
.el-submenu,
.el-menu-item {
width: 200px;
user-select: none;
}
}
</style>
设置router为true,使NavMenu 导航菜单开启路由模式
并在主体部分设置二级路由出口,实现内容切换
效果