vue+element实现多标签页导航教程
作者：熊叁(san)
本文介绍了使用element-ui的el-tab标签页实现左侧菜单和多页面标签导航的功能,详细描述了实现过程及遇到的弹窗背景遮罩问题,供开发者参考
项目需求
实现左侧菜单栏，右边内容区的顶部有个导航栏，每打开一个页面，右边导航栏就多一个标签，打开的页面缓存下来，可以实现多页面切换。
有两种思路
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
})
},
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。