dy-admin-manager/src/views/afterSchoolManager/index.vue

<!--  -->
<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>课外训练
    </h2>
    <div class="m-core">
        <tab-router v-model.trim="activeIndex"
               type="card"
               @tab-click="handleClick">
          <el-tab-pane lazy label="课外训练"
                      name="1">
            <afterSchoolList v-if="activeIndex == 1"></afterSchoolList>
          </el-tab-pane>
          <el-tab-pane lazy label="课外训练(学员)"
                      name="2">
            <afterWorkList v-if="activeIndex == 2"></afterWorkList>
          </el-tab-pane>
        </tab-router>
    </div>
  </div>
</template>

<script>
import afterSchoolList from "@/views/afterSchoolManager/afterSchoolList";
import afterWorkList from "@/views/afterSchoolManager/afterWorkList";
export default {
  components: { afterSchoolList, afterWorkList},
  data () {
    const query = this.$route.query
    return {
      activeIndex: query.opt || "1",
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.init();
  },
  methods: {
    init () {
      this.$route.query.activeIndex
        ? (this.activeIndex = this.$route.query.activeIndex)
        : this.activeIndex;

    },
    handleClick (val) {
      this.activeIndex = val.name
    }
  }
};
</script>