Vue - NavMenu导航菜单 路由跳转级联 Tabs标签页的默认选中

Home页面 Navtification

<template>
  <div id="page">
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <template v-for="(item, i) in menuList">
        <el-menu-item
          v-if="item.child.length == 0"
          :index="item.index"
          :key="i"
        >
          {{ item.title }}
        </el-menu-item>
        <el-submenu v-else :index="item.index" :key="i">
          <template slot="title">{{ item.title }}</template>
          <el-menu-item
            v-for="(ite, j) in item.child"
            :key="item.index + j"
            :index="ite.index"
            @click="pro((value = j))"
            >{{ ite.title }}</el-menu-item
          >
        </el-submenu>
      </template>
    </el-menu>
    <div class="body">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      activeIndex: "1",
      menuList: [
        {
          title: "目录1",
          index: "1",
          child: []
        },
        {
          title: "目录2",
          index: "2",
          child: [
            {
              title: "目录2-1",
              index: "2-1"
            },
            {
              title: "目录2-2",
              index: "2-2"
            },
            {
              title: "目录2-3",
              index: "2-3"
            },
            {
              title: "目录2-4",
              index: "2-4"
            },
            {
              title: "目录2-5",
              index: "2-5"
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    pro(value) {
      this.$router.push({ path: "/", query: { value } });
    }
  }
};
</script>

<style>
.page {
  width: 100%;
  height: 100%;
}
</style>

Tabs标签页

<template>
  <div class="page">
    <el-tabs class="tabs" tab-position="left" :value="this.value">
      <el-tab-pane
        v-for="(item, index) of tabList"
        :key="index"
        :label="item.title"
        >{{ item.title }}</el-tab-pane
      >
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      tabList: [
        {
          title: "目录2-1"
        },
        {
          title: "目录2-2"
        },
        {
          title: "目录2-3"
        },
        {
          title: "目录2-4"
        },
        {
          title: "目录2-5"
        }
      ]
    };
  },
  watch: {
    $route(v) {
      this.value = v.query.value.toString();
    }
  }
};
</script>

<style scoped>
.page {
  width: 100%;
  height: 100%;
}
</style>