不使用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>