在vue中使用vant组件的标签页，思路如下：

1、整体引入

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

2、具体代码如下

需要注意的是：

该组件在标签指定 name 属性的情况下，v-model 的值为当前标签的 name（此时无法通过索引值来匹配标签）。

即在进行标签切换的过程中，v-model会进行匹配对应的name名称，这样我们从后端发送请求的时候，可以通过对应的name请求不同标签下的数据，另外需要注意的一点是，我们需要进行监听v-model，这样系统才能知道其发生了变化，在随之进行不同的请求。

<template>
  <div id="app">

    <van-tabs v-model="activeName">
      <van-tab title="节目" name="prog">
        <!-- 节目的内容 -->
        <div
          v-for="(cont, index) in conts"
          :key="index"
          class="contDiv"
          @click="goDetail(cont.id)"
        >
          <div class="contPic"><img :src="cont.img" alt="" /></div>
          <ul class="conUl">
            <li>{{ cont.name }}</li>
            <li>章节：{{ cont.pages }}</li>
            <li>已订阅:{{ cont.reading }}</li>
            <li>更新时间：{{ cont.updatetime }}</li>
          </ul>
        </div>
      </van-tab>
      <!-- 课程的内容 -->
      <van-tab title="课程" name="cour">
        <div v-for="(cont, index) in conts" :key="index" class="contDiv">
          <div class="contPic">
            <img :src="cont.img" alt="" />
          </div>
          <ul class="conUl">
            <li>{{ cont.name }}</li>
            <li>价格：{{ cont.price }}</li>
            <li>热度:{{ cont.fiery }}</li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";
import { Dialog } from "vant";


export default {
  // name:"XseaDetail",
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      activeName: "prog",
      conts: "",
      value: this.$route.query.value,
    };
  },
  created() {
    axios({
      url: "/api/course/like",
      params: {
        value: this.$route.query.value,
        // tyid: this.activeName,
      },
    }).then((res) => {
     
     if(res.data.data.length != 0) {
        this.conts = res.data.data;

     }else if(res.data.data.length == 0) {
        Dialog.alert({
          message: "该关键字下无课程",
        }).then(() => {
          this.$router.go(-1);
        });
      }
    });
  },
  watch: {
    //  从后端请求

    activeName: function () {
      if (this.activeName == "prog") {
        axios({
          url: "/api/course/like",
          methods: "get",
          params: {
            value: this.value,
          },
        }).then((res) => {
          this.conts = res.data.data;
        });
      } else if (this.activeName == "cour") {
        axios({
          url: "/api/goods/like",
          methods: "get",
          params: {
            value: this.value,
          },
        }).then((res) => {
          this.conts = res.data.data;
          console.log("课程", this.conts);
        });
      }
    },
  },
  methods: {
    goDetail(id) {
      this.$router.push({
        path: "/progdetail",
        query: { id },
      });
    },
  },
};
</script>