eventBus+vue-router+element写tab标签页

eventBus.js

//新建eventBus实例
import Vue from 'vue'
export default new Vue()

router.js

//meta传递name名
{
      path: '/version/defDetail',
      name: 'VersionDefDetail',
      meta:{
        name:'标签1',
      },
//全局路由守卫
router.beforeEach((to, from, next) => {
      eventBus.$emit('addTab',{title:to.meta.name,names:to.name,path:to.path,query: Object.keys(to.query).length?to.query:'',params:Object.keys(to.params).length?to.params:''})
  
  next();
}, function (result) {

});

App.vue

//标签页
  <tabs-com></tabs-com>
//组件要加key 如果不加，路由相同，参数不同时 ，不会刷新页面
        <router-view :key="key" ref="routerView"/>
//计算属性做处理
 computed:{
        key(){
            return this.$route.path + Math.random();
        }
    },

组件页 tabsCom.vue

<template>
//如果有数据展示，没有就不展示
  <div class="tabs" v-if="editableTabs.length">
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click='clickTab' class="tabbox">
            <el-tab-pane
                v-for="(item, index) in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
            >
            </el-tab-pane>
        </el-tabs>
  </div>
</template>

<script>
//引入eventBus
import eventBus from '../evenBus'

export default {
  name: 'tabs',
  props: { 
  },
  mounted(){

//第一次eventBus是挂载不上的，路由全局守卫要比组件先运行，所以第一次要先调用
//一下 this.addTab()

      this.addTab()
//设置eventbus

       eventBus.$on('addTab',(targetName)=>{
           let isadd=true
            this.editableTabs.forEach(item=>{
                console.log(item.query,targetName.query)
 //如果之前添加过了，参数也一样，就不添加   
            if(item.path===targetName.path&&JSON.stringify(item.query)==JSON.stringify(targetName.query)){

                    isadd=false
//光标归位

                    this.editableTabsValue=item.name
                }
            })

           if(!isadd) return
//添加数据

          let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                title: targetName.title,
                name:newTabName,
                names:targetName.names,
                path: targetName.path,
                query:targetName.query,
                params:targetName.params
                });
                this.editableTabsValue = newTabName;
       })
  },
  data() {
      return {
        editableTabsValue: '2',
        editableTabs: [],
        tabIndex: 2
        }
    },
  methods: {
      addTab(){
          console.log(this.$route,'dsaddadsa')
          let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                title: this.$route.meta.name,
                name:newTabName,
                names:this.$route.name,
                path: this.$route.path,
                query:Object.keys( this.$route.query).length?to.query:'',
                params:Object.keys( this.$route.params).length?to.params:''
                });
                this.editableTabsValue = newTabName;
       },
      removeTab(targetName) {
         let tabs = this.editableTabs;
        let activeName = this.editableTabsValue ;
        let active=JSON.parse(JSON.stringify(this.editableTabsValue))
        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.editableTabsValue =activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
//如果删除的标签是自己，则跳转到最后一个标签
        if(this.editableTabs.length&&active === targetName){
           this.$router.push({path:this.editableTabs[this.editableTabs.length-1].path,query:this.editableTabs[this.editableTabs.length-1]})
         }
    },
//点击跳转路由

    clickTab(tab,target){

//这边可以加判断，如果params有值  可以按params传参来传 
          this.$router.push({path:this.editableTabs[tab.index].path,query:this.editableTabs[tab.index].query})
            console.log(this.editableTabs[tab.index].path)
    }
  }
}
</script>

<style lang='scss' scoped>
.tabs{
    z-index: 100;
    position: relative;
    width: 100%;
     background: white;
     height: 36px;
     margin-bottom: 16px;
     margin:-16px -16px 16px ;
    //  overflow: hidden;
    .tabbox{
        position: absolute; 
        left: 0;
        top:0;
    }
}
</style>