vue实现el-menu和el-tab联动的示例代码

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    openTab: [],
    activeIndexTab: ''
  },
  mutations: {
  //添加tab事件
    add_tabs (state, data) {
      state.openTab.push(data)
    },
    //删除
    delete_tabs (state, name) {
      let index = 0
      for (let item of state.openTab) {
        if (item.name === name) {
          break
        }
        index++
      }
      state.openTab.splice(index, 1)
    },
    //设置高亮tab
    set_active_index (state, index) {
      state.activeIndexTab = index
    },
  },
})

<el-menu>
 <div v-for="(item, index) in menuList" :key="index">
   <el-menu-item :index="item.index" :class="{'isActive':activeIndex == item.index}" @click="routeTo(item)">
     <i :class="['icon', item.name]"></i>
     <span slot="title">{{ item.title }}</span>
   </el-menu-item>
 </div>
</el-menu>
<el-tabs v-model="activeIndexTab" type="card" @tab-click="clickTab" @tab-remove="removeTab" closable>
 <el-tab-pane v-for="item of openTab" v-if="openTab.length" :key="item.title" :label="item.title" :name="item.name">
 </el-tab-pane>
</el-tabs>

data() {
 return {
   activeIndex: "",
   menuList:[
     {"index":"1","title":"商户资料管理","name":"meansManage"},
     {"index":"2","title":"商户订单管理","name":"payOrderManage"},
     {"index":"3","title":"商户报表管理","name":"reportManage"},
   ]
 }
},

 computed: {
   openTab () {
     return this.$store.state.openTab
   },
   activeIndexTab: {
     get () {
       return this.$store.state.activeIndexTab
     },
     set (val) {
       this.$store.commit('set_active_index', val)
     }
   },
 },

{
  path: "/",
  component: frame,
  redirect: "/meansManage",
  children: [
    {
      path: "/meansManage",
      name: "meansManage",
      meta:{title:'商户资料管理'},
      component: () => import("../components/merchantManage/meansManage/index.vue")
    },
    {
      path: "/payOrderManage",
      name: "payOrderManage",
      meta:{title:'商户订单管理'},
      component: () => import("../components/merchantManage/payOrderManage/orderIndex.vue")
    },
    {
      path:'/reportManage',
      name:'reportManage',
      meta:{title:'商户报表管理'},
      component: () => import('../components/merchantManage/reportManage/index.vue')
    }
  ]
},

watch:{
   '$route'(val){
     let flag = false
     this.openTab.forEach(tab => {
       if (val.path == tab.name) {
         this.$store.commit('set_active_index',val.path)
         flag = true
         return
       }
     })
     if (!flag) {
       this.$store.commit('add_tabs', {name: val.path , title: val.meta.title})
       this.$store.commit('set_active_index', val.path)
     }
   }
 },

mounted(){
	this.$store.commit('add_tabs', {name: this.$route.path , title: this.$route.meta.title})
	this.$store.commit('set_active_index', this.$route.path)
}

clickTab (tab) {
  this.$router.push({path: this.activeIndexTab})
},
removeTab (target) { //target当前被点击的name属性
  if (this.openTab.length == 1) {
    return
  }
  this.$store.commit('delete_tabs', target)
  if (this.activeIndexTab === target) {
    // 设置当前激活的路由
    if (this.openTab && this.openTab.length >= 1) {
      this.$store.commit('set_active_index', this.openTab[this.openTab.length - 1].name)
      this.$router.push({path: this.activeIndexTab})
    }
  }
},