Vue+Element UI 侧边导航与标签页同步

在之前的文章中完成了侧边导航

1、现在完成了侧边导航、标签页和内容的联动，
2、重复点击侧边导航时，标签页不会重复出现，
3、路由状态的保持（切换路由后内容不变化），
4、标签页删除显示右侧标签页（右侧没有则显示左侧）

我看了其他人写的，但是我自己实现的时候始终没有实现，我的是导航栏和标签页可以联动，但标签页和内容不能联动。后来我就干脆不用他们的方法了，跳转路由直接用 this.$router.push() 进行跳转。

原理：
侧边导航和标签页的联动：点击侧边导航时将点击的数据存放到 store 中，然后将数据传回，标签页遍历穿回的数据。

标签页与内容的联动：将标签页的 v-model 设置为点击的页面，同时跳转路由。

避免重复点击：在 store 中存放侧边导航点击数据时，进行判断。如果存在，不存放数据；如果不存在，存放数据

路由状态的保持：在 <router-view> 外嵌套 <keep-alive>

标签页删除：直接套用elementUI的案例

代码：

<!-- 侧边导航 -->
<el-menu
  background-color="#0080c9"
  text-color="#ffffff"
  router
  :default-active="activeIndex"
>
  <!-- 动态渲染导航 -->
  <template v-for="submenu in menuList">
    <el-submenu :index="submenu.id" :key="submenu.id">
      <template slot="title"> {{ submenu.title }} </template>
      <template v-for="menu in submenu.children">
      <!-- 添加标签页的方法 addTab() -->
        <el-menu-item
          :index="menu.index"
          :key="menu.id"
          @click="addTab(menu)"
        >
          {{ menu.childtitle }}
        </el-menu-item>
      </template>
    </el-submenu>
  </template>
</el-menu>

  <!-- 标签栏 -->
  <div class="tabs">
    <el-tabs v-model="activeIndex" @tab-remove="removeTab">
    <!-- :closable 首页不可关闭 -->
      <el-tab-pane
        v-for="item in openTab"
        :key="item.childtitle"
        :label="item.childtitle"
        :name="item.index"
        :closable="item.childtitle !== '首页' "
      >
        <div class="maincontent">
        <!-- keep-alive 保持路由状态 -->
          <keep-alive>
            <router-view name="main"></router-view>
          </keep-alive>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

在store中

  state: {
    //所有打开的路由
    openTab: [
      {childtitle: "首页", index: "/homepage/Home" }
    ],
    // 激活状态，侧边导航和标签页的激活状态，初始为首页
    activeIndex: "/homepage/Home",
  },
  mutations: {
    // 单机导航栏时添加标签页
    addTab(state, data) {
      if (state.openTab.indexOf(data) == -1) {
        state.openTab.push(data);
        state.activeIndex=data.index;
      }
      // console.log("aaa",state.openTab)
    },
  },

主页中：

  // 计算属性 从状态管理中获取的数据，因为需要获取和设置store中的数据，所以需要用 get 和 set
  computed: {
    // 已打开的标签页
    openTab: {
      get: function () {
        return this.$store.state.openTab;
      },
      // 用于删除标签页时将删除后的数据传回store
      set: function (newValue) {
        // console.log(newValue);
        this.$store.state.openTab = newValue;
      },
    },
    // 当前标签页
    activeIndex: {
      get: function () {
        return this.$store.state.activeIndex;
      },
      set: function (newValue) {
      	// 当前标签页变化时触发
        // console.log(1111, newValue);
        this.$store.state.activeIndex = newValue;
        this.$router.push(newValue);
      },
    },
  },
  methods: {
    // 从状态管理中获取方法 添加标签页方法
    addTab(data) {
      this.$store.commit("addTab", data);
    },
    // 删除tab，直接在elementUI官网复制的，改了变量名
    removeTab(targetName) {
      // console.log(targetName);
      let tabs = this.openTab;
      let activeIndex = this.activeIndex;
      if (activeIndex === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.index === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeIndex = nextTab.index;
            }
          }
        });
      }

      this.activeIndex = activeIndex;
      this.openTab = tabs.filter((tab) => tab.index !== targetName);
    },
  },