vue+element实现多标签页导航

项目需求：实现左侧菜单栏，右边内容区的顶部有个导航栏，每打开一个页面，右边导航栏就多一个标签，打开的页面缓存下来，可以实现多页面切换。

有两种思路：

1.element-ui的el-tab标签页实现。

2.网上看的有个比较复杂的做法，我没采用，但是我把具体代码写了出来，可供参考。

 

我用的是第一种方法，具体这周末补齐。

这两种做法都会出现一个问题：element弹窗背景遮罩的问题，周末一并解决

<el-tabs v-model="pageCurrent" type="card" closable @tab-click='tabChange' @tab-remove="removeTab">
	<el-tab-pane v-for="(item) in pageList"
		:key="item.name"
		:name="item.name">
		<span slot="label">
			<span>{{item.label}}</span>
			<span class="refresh">
				<i style="font-size:15px;" @click="refreshModule" class="el-icon-refresh" ></i> 
			</span>
		</span>
	</el-tab-pane> 
</el-tabs>



<keep-alive :exclude="exclude">
    <router-view v-if="condition" ref="view" />
</keep-alive>

data() {
	return {
		pageCurrent:'',
		pageList:[],
		exclude:null,
		condition:true,
	}
},

watch: {
	$route: {
		handler(to,form=null){
			//当路由改变时，检测该路由是否已经在打开的页面之中，如果不在，就添加进去
			this.pageCurrent = to.path;
		},
		immediate: true
	}
},

methods: {
	removeTab(targetName){
		let tabs = this.pageList;
		let activeName = this.pageCurrent;
		if (activeName === targetName) {
			tabs.forEach((tab, index) => {
				if (tab.name === targetName) {
					let nextTab = tabs[index + 1] || tabs[index - 1];
					if (nextTab) {
						activeName = nextTab.name;
					}
				}
			});
		};
		this.pageCurrent = activeName;
		this.pageList = tabs.filter(tab => tab.name !== targetName);
		this.$router.push({path:activeName})
	},
	tabChange(tab,event){
		this.$router.push({path:tab.name})
	},
	refreshModule(){
		this.exclude = this.$refs.view.$options.name;
		this.condition = !this.condition
		this.$nextTick(_ => {
			this.exclude = null
			this.condition = !this.condition
		})
	},
	
}