平台项目首页——左侧菜单栏实现（三）

---

一、页面布局设计

<template>
	<!-- 进入页面的主界面内容 -->
	<div class="home">
		<!-- 左侧菜单 -->
		<div class="left_box">
		</div>
		
		<!-- 右侧内容 -->
		<div class="right_box">
			<!-- 顶部标签栏 -->
			<div class="top_box">
			</div>
			
			<!-- 主题内容展示区域 -->
			<div class="main_box">
				
			</div>
		</div>
	</div>
</template>

<script>

</script>

<style scoped>
	/* 整体背景设置 */
	.home{
		height: 100vh;
		background: #00aa7f;
		display: flex;
	}
	/* 左侧内容的布局 */
	.left_box{
		width:200px;
		/* 右侧的边框线 实线、1像素 白色 */
		border-right: solid 1px #fff;
		height: 100vh;
	}
	/* 右侧的整体布局 */
	.right_box{
		/* 左侧元素占用2oopx，右侧的元素占用其他的所有空间 */
		flex:1;
		margin: 3px;
		background: burlywood;
	}
	/* 右侧顶部标签栏的样式 */
	.top_box{
		height: 60px;
		background: #fff;
		/* 向下的margin */
		margin-bottom: 2px;
	}
	/* 右侧主题内容展示区域的样式 */
	.main_box{
		/* 屏幕高度-边框线-减去顶部盒子的高度 */
		height:calc(100vh - 68px);
		background: #fff;	
		/* 圆角展示 */
		border-radius:5px;
		padding: 5px;
		}
</style>

二、左侧菜单栏设计

为了方便后期维护，将左侧菜单栏和右侧顶部栏设计成单独的组件

1、注意

通过路由可以访问的页面，页面对应的组件，将组件定义在views中
当定义的组件是给到路由中对应的组件中用的，将组件定义在components中

2、使用组件

2.1、导入组件

2.2、注册组件

2.3、使用组件

3、用户信息代码设计

<template>
	<!-- 顶部图标logo用户信息显示 -->
	<div class="user_box">
		<img src="../assets/logo.png" width="45" >
		<div class="info">
			
			<el-dropdown>
			    <span class="el-dropdown-link">
				  <!-- 用户图标 -->
				  <el-icon ><User /></el-icon>

				  <!-- 下拉菜单 -->
			      {{ uname }}
			      <el-icon><CaretBottom /></el-icon>
			    </span>
			    <template #dropdown>
			      <el-dropdown-menu>
					<!-- 选项 -->
			        <el-dropdown-item @click="logout">注销登录</el-dropdown-item>
			        <el-dropdown-item @click="$router.push({name:'allProject'})">切换项目</el-dropdown-item>

			      </el-dropdown-menu>
			    </template>
			</el-dropdown>
		</div>
	</div>
</template>

<script>

	export default{
		computed:{
			uname(){
				return window.sessionStorage.getItem('username')
			}
		},
	}

</script>

<style scoped>
	/* 顶部用户信息的样式 */
	.user_box{
		height: 63px;
		border-bottom: solid 1px #fff;
		display: flex;
		/* 居中 */
		align-items: center;
	}
	/* logo图片的样式 */
	.user_box img{
		/* 上、右、下、左 */
		padding: 0 40px 0 10px;
		/* 右侧margin */
		margin-right: 20px;
	}

	/* 下拉菜单的样式 */
	.user_box .info .el-dropdown-link {
	  cursor: pointer;
	  color: #fff;
	  display: flex;
	  align-items: center;
	  font-size: 16px;
	}
	
</style>

4、左侧菜单代码设计

background-color=“none” 去除菜单颜色
text-color=“#fff” 未选中文字颜色
active-text-color=“#ffaa00” 选中后的文字颜色

<template>
	<!-- 顶部图标logo用户信息显示 -->
	<div class="user_box">
		<img src="../assets/logo.png" width="45" >
		<div class="info">
			
			<el-dropdown>
			    <span class="el-dropdown-link">
				  <!-- 用户图标 -->
				  <el-icon ><User /></el-icon>

				  <!-- 下拉菜单 -->
			      {{ uname }}
			      <el-icon><CaretBottom /></el-icon>
			    </span>
			    <template #dropdown>
			      <el-dropdown-menu>
					<!-- 选项 -->
			        <el-dropdown-item @click="logout">注销登录</el-dropdown-item>
			        <el-dropdown-item @click="$router.push({name:'allProject'})">切换项目</el-dropdown-item>

			      </el-dropdown-menu>
			    </template>
			</el-dropdown>
		</div>
	</div>
	<!-- 菜单显示 -->

	<!--background-color="none" 去除菜单颜色 -->
	<!-- text-color="#fff" 未选中文字颜色 -->
	<!-- active-text-color="#ffaa00" 选中后的文字颜色 -->
	<el-menu
		router
        :default-active="$route.path"
        class="el-menu-vertical-demo leftmenubox"
        background-color="none"
        text-color="#ffffff"
        active-text-color="#ffaa00">
		
		<el-menu-item index="/project">
			<el-icon><location /></el-icon>
			<span>项目首页</span>
		</el-menu-item>	
		<el-menu-item index="/interface">
			<el-icon><location /></el-icon>
			<span>接口管理</span>
		</el-menu-item>	
		<el-menu-item index="3">
			<el-icon><location /></el-icon>
			<span>接口测试</span>
		</el-menu-item>	 
		<el-menu-item index="/records">
			<el-icon><location /></el-icon>
			<span>测试报表</span>
		</el-menu-item>
	</el-menu>
</template>

<script>
	export default{
		computed:{
			uname(){
				return window.sessionStorage.getItem('username')
			}
		},
	}

</script>

<style scoped>
	/* 顶部用户信息的样式 */
	.user_box{
		height: 63px;
		border-bottom: solid 1px #fff;
		display: flex;
		/* 居中 */
		align-items: center;
	}
	/* logo图片的样式 */
	.user_box img{
		/* 上、右、下、左 */
		padding: 0 40px 0 10px;
		/* 右侧margin */
		margin-right: 20px;
	}
	/* 下拉菜单的样式 */
	.user_box .info .el-dropdown-link {
	  cursor: pointer;
	  color: #fff;
	  display: flex;
	  align-items: center;
	  font-size: 16px;
	}
	
</style>

修改element UI提供的组件，修改选中后的菜单背景颜色
需要将修改的css样式在全局css中

/* ==================左侧菜单的样式更改======================= */
.leftmenubox .el-menu-item:hover{
	background: rgb(224, 229, 224);
}

5、用户信息——注销登录和切换项目功能实现

选择注销登录——》清除token和用户名、重定向到登录页面
选择切换项目——》切换路由到项目列表页面$router.push({name:'allProject'})

<template>
      <el-dropdown-menu>
		<!-- 选项 -->
        <el-dropdown-item @click="logout">注销登录</el-dropdown-item>
        <el-dropdown-item @click="$router.push({name:'allProject'})">切换项目</el-dropdown-item>
      </el-dropdown-menu>
</template>

<script>

	export default{
		computed:{
			uname(){
				return window.sessionStorage.getItem('username')
			}
		},
		methods:{
			// 移除token和用户信息
			logout(){
				// 清除token和用户名
				window.sessionStorage.removeItem('token');
				window.sessionStorage.removeItem('username');
				// 再重定向到登录页面
				this.$router.push({name:'login'})
			}
		
			
		}
	}

</script>

<style scoped>
	......
	......
</style>

三、嵌套路由实现

当切换到项目首页菜单时：主界面展示项目首页的信息
当切换到接口管理菜单时：主界面展示接口管理的信息
等等

1、配置home的嵌套路由（子路由）

2、home中预留的路由展示位（路由出口）

3、点击菜单实现路由跳转

router:实现路由跳转
index="/project"只能设置字符串
:default-active="$route.path":$route.path:$route：获取当前路由

当新增一个菜单的时候：
a、定义1个父组件例如testcase.vue
b、配置home的嵌套路由例如（path：‘/testcase’）
c、在子组件LeftMenu.vue中，新增菜单

<el-menu-item index="3">
	<el-icon><location /></el-icon>
	<span>用例管理</span>
</el-menu-item>	

d、修改index：index=‘/testcase’

<el-menu-item index='/testcase'>
	<el-icon><location /></el-icon>
	<span>用例管理</span>
</el-menu-item>	

---