这篇文章主要介绍了vue中elementUI如何使用tabs与导航栏联动，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
不使用tabs标签页时，点击导航菜单，router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件，这就需要使用tabs组件
在slider.vue中点击路由后，把当前选择的路由@select使用bus传出去
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#eeefef" text-color="#666" active-text-color="#20a0ff" unique-opened router @select="addTab">
<!-- 一级菜单 -->
<template v-for="item in slidebarData" >
<el-submenu v-if="item.subs && item.subs.length" :index="item.index" :key="item.index">
<template slot="title"><i :class="item.icon"></i><span>{{item.title}}</span></template>
<!-- 二级菜单 -->
<template v-for="itemChild in item.subs">
<el-submenu v-if="itemChild.subs && itemChild.subs.length" :index="itemChild.index" :key="itemChild.index" class="erji">
<template slot="title"><i :class="itemChild.icon"></i><span>{{itemChild.title}}</span></template>
<!-- 三级菜单 -->
<el-menu-item v-for="itemChild_Child in itemChild.subs" :index="itemChild_Child.index" :key="itemChild_Child.index">
<i :class="itemChild_Child.icon"></i><span slot="title">{{itemChild_Child.title}}</span>
</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="itemChild.index" :key="itemChild.index"><i :class="itemChild.icon"></i><span slot="title">{{itemChild.title}}</span></el-menu-item>
</template>
</el-submenu>
<el-menu-item v-else :index="item.index" :key="item.index"><i :class="item.icon"></i><span slot="title">{{item.title}}</span></el-menu-item>
</template>
</el-menu>使用bus把路由信息传出
import bus from '../common/bus';
methods: {
addTab(key,keyPath) {
console.log(key,keyPath)
bus.$emit('navPath',keyPath)
}
},在tabs.vue中接收
<template>
<div id="tabs">
<el-tabs type="card" v-model="tabsVal" @tab-remove="closeTab" @tab-click="tabclick">
<el-tab-pane v-for="item in tabList" :key="item.name" :name="item.name" :label="item.title" :closable="item.closable" >
<component :is="item.component"></component>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import searchFor from '../page/ContentManagement/Class/searchFor.vue';
import bus from '../common/bus';
export default {
data() {
return {
inputVisible: false,
navPath: '',
tabsVal: "searchFor",
tabList: [
{
title: '热门搜索',
name: 'searchFor',
disabled: true,
closable: false,
component: searchFor
}
]
}
},
methods: {
closeTab(tag) {//关闭tabs
var tabListName = []
for(let i = 0; i < this.tabList.length; i++){
tabListName[i] = this.tabList[i].name;
}
console.log(tabListName)
this.tabList.splice(tabListName.indexOf(tag), 1);
this.tabsVal = "searchFor";
this.$router.push("searchFor");
},
tabclick(val) {
console.log(val)
this.$router.push(val.name);
//点击tabs触发路由跳转，到相应路由
}
},
mounted () {
bus.$on('navPath',(name,val) =>{//处理传过来的值
console.log(name)
var titname;
if(name[name.length -1] == 'searchFor'){
titname = '热门搜索'
}else if(name[name.length -1] == 'Courier1'){
titname = '套课列表'
}else if(name[name.length -1] == 'Courier2'){
titname = '小节列表'
}else if(name[name.length -1] == 'Courier3'){
titname = '套课分享'
}
if (this.tabList.filter(f => f.name == name[name.length -1]) == 0) {
var component = resolve => require([`../page/ContentManagement/${name[0]}/${name[name.length -1]}`], resolve)//合伙人管理
this.tabList.push({
title: titname,
name: name[name.length -1],
disabled: false,
closable: true,
component: component
})
}
this.tabsVal = name[name.length -1]
});
}
}
</script>
<style scoped>
#tabs {
position: fixed;
right: calc(2vw - 2px);
top: 100px;
z-index: 5;
width: calc(96% - 189px);
height: 38px;
background: #f0f0f0;
border-bottom: 4px solid #ccc;
border-top: 4px solid #ccc;
padding-left: 10px;
}
.el-tag {
margin: 3px;
}
</style>感谢你能够认真阅读完这篇文章，希望小编分享的“vue中elementUI如何使用tabs与导航栏联动”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
