vue+elementui选项卡简单应用

用法：
首先自己先在项目中定义三个组件（顶部TopNav，左侧LeftAside，中间Main），这方法三两句话描述不清

我就上我用过的一个项目代码实例（但是这个有点缺陷，没有做像一键清空选项卡，关闭左右侧选项卡的方法）

TopNav

<template>
	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
		<el-button class="buttonimg">
			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
			<!-- :src="collapsed?imgshow:imgsq" @click="doToggle()" -->
		</el-button>
		<el-submenu index="2" class="submenu">
			<template slot="title">当前用户【{
  {username}}】身份认证:{
  {usertype}}</template>
			<el-menu-item index="2-1">设置</el-menu-item>
			<el-menu-item index="2-2" @click="mya()">个人中心</el-menu-item>
			<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
		</el-submenu>
	</el-menu>
</template>

<script>
	export default {
		name: 'LeftAside',
		data: function() {
			return {
				collapsed: false, //是否折叠
				imgshow: require('../assets/img/show.png'),
				imgsq: require('../assets/img/sq.png'),
				username:sessionStorage.getItem("username"),
				usertype:sessionStorage.getItem("deptment")
			};
		},
		methods: {
			doToggle() {
				this.collapsed = !this.collapsed;
				console.log("TopNav的collapsed=%s", this.collapsed);
				this.$emit('top-click', this.collapsed);
			},
			exit() {
				this.$confirm('亲，请不要走，留下好不好？', '提示', {
					confirmButtonText: '残忍离开',
					cancelButtonText: '留下~',
					type: 'warning'
				}).then(() => {
					this.$router.push('/');

				}).catch(() => {});
			},
      mya(){
        /* this.$router.push('/userCenter'); */
         /* this.$router.push('/system/UserCenter'); */
      }
		}
	}
</script>

<style scoped>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
	}

	.submenu {
		float: right;
	}

	.buttonimg {
		height: 60px;
		background-color: transparent;
		border: none;
	}

	.showimg