vue3的option式编程模式里如何用程序代码切换swiper的tab页

在Vue3的option式的编程模式中，Swiper组件通常通过数据驱动的方式来控制其选项，包括切换Tab页。你可以按照以下步骤操作：

1. 首先，在你的`data()`函数中定义一个数组或者对象来表示各个Tab的状态，例如：

data() {
  return {
    swiperOptions: {
      // 原始配置
      initialSlide: 0,
      tabs: [
        { title: 'Tab 1', index: 0 },
        { title: 'Tab 2', index: 1 },
        { title: 'Tab 3', index: 2 }
      ]
    },
    currentTabIndex: 0
  };
}

2. 当需要切换Tab时，更新`currentTabIndex`变量的值，比如点击按钮或路由改变时：

methods: {
  switchTab(index) {
    this.currentTabIndex = index;
  }
},
// 或者在响应某个事件时切换
watch: {
  '$route'(to, from) {
    this.switchTab(to.meta.tabIndex || 0); // 如果meta属性存在，则优先使用该值
  }
}

3. 使用`v-model`绑定`currentTabIndex`到Swiper的当前索引，并在`swiperOptions.tabs`上设置动态切换的条件：

<swiper :options="swiperOptions" @slideChange="switchTab">
  <swiper-slide v-for="(tab, index) in swiperOptions.tabs" :key="index" :class="{ active: index === currentTabIndex }">
    <div>{{ tab.title }}</div>
  </swiper-slide>
</swiper>

这里，当`active`类匹配当前`currentTabIndex`时，对应的滑块就会显示出来。