不使用tabs标签页时，点击导航菜单，router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件，这就需要使用tabs组件
在slider.vue中点击路由后，把当前选择的路由@select使用bus传出去
<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"> <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> <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>