tab切换子路由和子组件

命名组件：适用于各组件都不同的情况

• 通过 Vue 的 元素加一个特殊的 :is=“active” 来实现组件的切换
• 将tab的name 设置和组件名字一样，这样active就是当前显示组件的name

<template>
  <div class="app-container">
    <el-tabs v-model="active" type="card" @tab-click="handleClick">
      <el-tab-pane label="基本资料" name="basicInfo"></el-tab-pane>
      <el-tab-pane label="一般服务" name="generalService"></el-tab-pane>
      <el-tab-pane label="急救服务" name="emergencyService"></el-tab-pane>
      <el-tab-pane label="服务组织订单" name="orderService"></el-tab-pane>
      <el-tab-pane label="投诉建议" name="complaint"></el-tab-pane>
      <el-tab-pane label="回访客户" name="returnVisit"></el-tab-pane>
      <el-tab-pane label="通话记录" name="telRecord"></el-tab-pane>
      <el-tab-pane label="地图定位" name="mapPosition"></el-tab-pane>
      <el-tab-pane label="健康管理" name="health"></el-tab-pane>
      <el-tab-pane label="评估管理" name="assess"></el-tab-pane>
      <el-tab-pane label="智能监测" name="monitor"></el-tab-pane>
    </el-tabs>
    <component :is="active"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "basicInfo",
    };
  },
  components: {
    basicInfo: () => import("./components/basicInfo.vue"),
    generalService: () => import("./components/generalService.vue"),
    emergencyService: () => import("./components/emergencyService.vue"),
    orderService: () => import("./components/orderService.vue"),
    complaint: () => import("./components/complaint.vue"),
    returnVisit: () => import("./components/returnVisit.vue"),
    telRecord: () => import("./components/telRecord.vue"),
    mapPosition: () => import("./components/mapPosition.vue"),
    health: () => import("./components/health.vue"),
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

方法一：子路由，适用于完全不同的情况

//vant框架tab组件，结合to属性
<template>
  <div class="audit_2">
    <van-tabs v-model="active" sticky>
      <van-tab title="代理审核" to="/audit_2/audit" name="/audit_2/audit">
        <router-view></router-view>
      </van-tab>
      <van-tab
        title="下级充值"
        to="/audit_2/topuplist"
        name="/audit_2/topuplist"
      >
        <router-view></router-view>
      </van-tab>
    </van-tabs>
  </div>
</template>

解决tab切换bug

//name设置为路由，active也为路由，通过动态设置active为当前路由，从而达到页面和tab对应的效果
data() {
    return {
      active: "/audit_2/audit"
    };
  },
  watch: {        // bug2：点击返回按钮，tab跟页面不对应
    $route: function(newval, oldval) {
      this.active = newval.path;
    }
  },
  mounted() {
    this.active = this.$route.path;    // bug1：刷新页面，tab跟页面不对应
  },

//路                                                                                                                                                                                                                                                                                                                  由配置，先引入
//bug:子路由的path不能加/，路由会自动配置
    {
      path: "/audit_2", //代理2.0版本 —— 审核
      name: "audit_2",
      component: audit_2,
      redirect: "/audit_2/audit",
      children: [
        {
          path: "audit",
          name: "audit",
          component: audit,
          meta: {
            title: "审核授权"
          }
        },
        {
          path: "topuplist",
          name: "topuplist",
          component: topuplist,
          meta: {
            title: "下级充值审核"
          }
        }
      ]
    },

方法二：子组件，适用于组件相同或接口相同的情况

<template>
  <div class="bonus_payout">
    <van-tabs v-model="active">
      <van-tab title="推荐奖"><tuijian></tuijian></van-tab>
      <van-tab title="业绩奖"><yeji></yeji></van-tab>
      <van-tab title="平级奖"><pingji></pingji></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import tuijian from "./_components/tuijian_list";
import yeji from "./_components/yeji_list";
import pingji from "./_components/pingji_list";
export default {
  components: {
    tuijian,
    yeji,
    pingji
  },
}