【element-ui 中 el-tabs+el-menu 实现点击菜单 新增导航tab页 并实现关闭其他、当前、所有的功能】

element-ui 【el-tabs+el-menu 实现点击菜单 新增导航tab页 并实现关闭其他、当前、所有的功能】

文章分3个部分

1. el-tabs 以及右击菜单代码
2. vuex 代码及其方法实现
3. router路由信息常规写法&&el-menu写法常规（自行去掉修饰部分）

el-tabs 以及右击菜单代码

<template>
  <div>
    <el-tabs
      v-model="activeIndexTab"
      type="card"
      closable
      @tab-click="clickTab"
      @tab-remove="removeTab"
      @contextmenu.native.prevent="openContextmenu"
    >
      <el-tab-pane
        v-for="item of openTab"
        v-if="openTab.length"
        :key="item.name"
        class="myTab"
        :label="item.name"
        :name="item.path"
      />
    </el-tabs>
    <!-- 右边菜单 -->
    <ul
      v-show="visible"
      :style="{ left: left + 'px', top: '42px' }"
      class="contextmenu"
    >
      <li @click="closeSelectedTag">关闭当前</li>
      <li @click="closeOthersTags">关闭其他</li>
      <li @click="closeAllTags">关闭所有</li>
    </ul>
  </div>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      left: 0,
      visible: false,
      selectedTag: ''
    }
  },
  computed: {
   
    activeIndexTab: {
   
      get() {
   
        return this.$store.state.tabs.activeIndexTab
      },
      set(newValue) {
   
        return newValue
      }
    },
    openTab() {
   
      return this.$store.state.tabs.openTab
    }
  },
  watch: {
   
    $route: {
   
      handler(newValue) {
   
        let flag = false
        this.openTab.