NavMenu 导航菜单 与 el-tabs 标签页关联

直接上代码： vue模版

//导航就不用看吧。下面就是标签栏
<el-main>
        <!--导航标签 -->
        <el-tabs v-model="editableTabsValue" type="card"
          closable
          @tab-remove="removeTab"
          @tab-click="tabClick" editable >
          <el-tab-pane
            v-for="item in editableTabs"
            :key="item.path"
            :label="item.name"
            :name="item.path"
          >
          </el-tab-pane>
        </el-tabs>

        <router-view></router-view>
 </el-main>

data(){
	return{
	 editableTabs: [],//标签栏
     editableTabsValue: "",//标签高亮
	}
},
//第一种方式使用监听器。因为这是后端返回的路由。
//监听路由push到标签数组
watch: {
    //监听路由跳转页面，改变目录菜单
    $route(to, from) {
      if (to.name === "SubsidiesApplyDetails") {
        this.selectIndex = "ApplicationRecord";
      } else if (to.name === "ResidencyApplyDetails") {
        this.selectIndex = "ApplicationRecords";
      } else {
        this.selectIndex = to.name;
      }
      this.routeName=from.name;
      // if(to.name ==='SubsidiesApplyDetails'){
      //   this.selectIndex ='ApplicationRecord';
      // }
       // 判断子组件名和路由元信息中的子组件名相同
       console.log(to)
        const index = this.editableTabs.findIndex(
          res => res.path === to.name
        )
        // 如果tab存在,则只切换当前tab,不添加
        if (index !== -1) {
          this.editableTabsValue = this.editableTabs[
            this.editableTabs.findIndex(
              res => res.path === to.name
            )
          ].path
          this.$router.push({
            name: this.editableTabsValue,
          });
          return
        }
        // 路由变化后将当前路由和默认高亮的菜单保持一致,避免页面刷新还是默认的值
        this.defaultActive = to.name
        // 添加tab信息到集合列表,添加一个顺序往后排一个
        console.log('shuj',to)  
        let routing ={};
        this.$store.state.menuList.map((v) => {
         return v.children.filter(ele =>{
           return ele.path === to.name? routing={name:ele.name,path:ele.path} : ''
           })
         });
        if(Object.keys(routing).length===0){
          this.$store.state.menuList.map((v) => {
            return v.children.filter(ele =>{
              return ele.path === this.routeName? this.editableTabsValue = ele.path : ''
           })
         });
        }else{
          this.editableTabs.push(routing)
             // 每次添加后取最后一个的name显示新点击的tab
          this.editableTabsValue = this.editableTabs[this.editableTabs.length - 1].path
        }
        
     
      //this.$router.push({
        //name: path.menuUrl ? path.menuUrl : path,
      //});
    },
  },
created() {
    this.selectIndex = this.$route.name;
    //初始化获取所有的路由.....权限问题：所有路由都是由后端返回json格式，渲染
    let routing = ''
    this.$store.state.menuList.map((v) => {
     return v.children.filter(ele =>{
        return ele.path === this.selectIndex ? routing = ele.name : '';
      })
    });
    //渲染标签栏。数组
    this.editableTabs=[{
      name:routing,
      path: this.selectIndex
    }]
    //标签栏高亮选中状态
    this.editableTabsValue =this.selectIndex;
    }

事件：

// tab被点击时触发
    tabClick ({ name }) {
      if (name === this.$route.path) return
      this.$router.push({name:name}) // 触发路由监听,改变对应高亮的菜单
    },
     // 删除tab
    removeTab (targetPath) {
     if (this.editableTabs.length < 2) {
        return this.$message({
          type: 'warning',
          message: '至少要有一个标签页!',
          duration: 2000
        })
      }
      const editableTabs = this.editableTabs
      let activePath = this.editableTabsValue
      // 在所有tab中选出删除的目标标签页的上一个或者下一个,相邻的就是下一个当前tab
      if(targetPath===activePath){
        editableTabs.forEach((tab, index) => {
          if (tab.path === targetPath) {
            const nextTab = editableTabs[index - 1] || editableTabs[index + 1]
            // 将下一个tab高亮
            activePath = nextTab.path
            // 删除掉要删除的目标tab
            this.editableTabs.splice(index, 1)
          }
        })
      }else{
        editableTabs.forEach((tab, index) => {
          if (tab.path === targetPath) {
            // 删除掉要删除的目标tab
            this.editableTabs.splice(index, 1)
          }
        })
      }
      // 路由跳转到删除后的下一个tab,触发路由监听改变左边对应菜单栏的高亮
        this.editableTabsValue =activePath
        this.$router.push(this.editableTabsValue)
    },

第二种》点击导航菜单 push到标签栏数组里

go(path,val,item) {
	// 判断子组件名和路由元信息中的子组件名相同
   const index = this.editableTabs.findIndex(
     res => res.path === item.path
   )
   // 如果tab存在,则只切换当前tab,不添加
   if (index !== -1) {
     this.editableTabsValue = this.editableTabs[
       this.editableTabs.findIndex(
         res => res.path === item.path
       )
     ].path
     this.$router.push({
       name: this.editableTabsValue,
     });
     return
   }
   // 路由变化后将当前路由和默认高亮的菜单保持一致,避免页面刷新还是默认的值
   this.defaultActive = item.path
   // 添加tab信息到集合列表,添加一个顺序往后排一个
   this.editableTabs.push(item)
   // 每次添加后取最后一个的name显示新点击的tab
   this.editableTabsValue = this.editableTabs[this.editableTabs.length - 1].path
}
 

修改css
css添加文字

::v-deep .el-tabs__new-tab{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    width: 40px;
    margin: 0;
    padding: 6px;
    &:after{
        position: absolute;
        content: '关闭其它';
    }
    .is-icon-plus{
        display: none;
    }
}