ks/vue/src/views/Home/index.vue

<template>
  <Basic>
    <div class="home">
      <el-tabs
        v-model="activeName"
        @tab-click="RouterLink"
      >
        <el-tab-pane
          label="首页"
          name="0"
        >
        </el-tab-pane>
        <el-tab-pane
          label="知识库"
          name="1"
        >
        </el-tab-pane>
        <el-tab-pane
          label="习题练习"
          name="2"
        >
        </el-tab-pane>
        <el-tab-pane
          label="模拟考试"
          name="3"
        >
        </el-tab-pane>
        <el-tab-pane
          label="正式考试"
          name="4"
        >
        </el-tab-pane>
        <el-tab-pane
          label="考试记录"
          name="5"
        >
        </el-tab-pane>
        <el-tab-pane
          label="错题集"
          name="6"
        ></el-tab-pane>
      </el-tabs>
      <div class="content">
        <!-- 解决首页倒计时的状态问题 -->
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
      </div>
    </div>
  </Basic>
</template>

<script>
const Basic = () => import("@/components/Basic/index");
export default {
  components: {
    Basic
  },
  data () {
    return {
      activeName: '0',
      // 路由
      routers: ['/', '/knowledgebase', '/practice', '/mockexamination', '/formalexamination', '/examinationrecord', "/wrongquestion"]
    }
  },
  methods: {
    // 解决标签页与路由的联动
    RouterLink () {
      let routers = this.routers, path = this.$route.path;
      if (path == routers[this.activeName]) return false;
      this.$router.replace(routers[this.activeName])
    }
  },
  created () {
    // 解决标签页与路由的联动
    let routers = this.routers, path = this.$route.path;
    this.activeName = routers.indexOf(path).toString();
  },
  watch: {
    // 解决首页与路由的联动
    $route (val, old) {
      let routers = this.routers, path = val.path;
      this.activeName = routers.indexOf(path).toString();
    }
  }
}
</script>
<style lang="less" >
</style>