MyAside.vue

<template>
	<el-menu default-active="$route.path" class="layout-aside-container" background-color="#fff" text-color="#000" active-text-color="#42b983">
		<router-link to="/home/interview">
			<el-menu-item index="/interview" class="left-aside-item">
				<i class="el-icon-question"></i>
				<span slot="title">面试题管理</span>
			</el-menu-item>
		</router-link>
		<router-link to="/home/algorithmic">
			<el-menu-item index="/algorithmic" class="left-aside-item">
				<i class="el-icon-info"></i>
				<span slot="title">算法题管理</span>
			</el-menu-item>
		</router-link>
		<router-link to="/home/aphorismPoetry">
			<el-menu-item index="/aphorismPoetry" class="left-aside-item">
				<i class="el-icon-document"></i>
				<span slot="title">诗词管理</span>
			</el-menu-item>
		</router-link>
		<router-link to="/home/chat">
			<el-menu-item index="/chat" class="left-aside-item">
				<i class="el-icon-chat-line-square"></i>
				<span slot="title">CHAT管理</span>
			</el-menu-item>
		</router-link>
		<router-link to="/home/pic">
			<el-menu-item index="/pic" class="left-aside-item">
				<i class="el-icon-setting"></i>
				<span slot="title">图片管理</span>
			</el-menu-item>
		</router-link>
		<router-link to="/home/csdnUser">
			<el-menu-item index="/csdnUser" class="left-aside-item">
				<i class="el-icon-user"></i>
				<span slot="title">用户管理</span>
			</el-menu-item>
		</router-link>
		<router-link to="/home/tripletDayInfo">
			<el-menu-item index="/tripletDayInfo" class="left-aside-item">
				<i class="el-icon-user"></i>
				<span slot="title">三连管理</span>
			</el-menu-item>
		</router-link>
	</el-menu>
</template>
<script>
export default { name: 'MyAside' }
</script>

<style lang="less" scoped>
.layout-aside-container {
	width: 200px;
	height: 100%;
	border-right: 1px solid #eaeaea;
}

.left-aside-item {
	font-size: 20px;
}
</style>