vue3 swiper跳转指定页

在Vue3中使用Swiper组件进行页面跳转并指定特定页面，你可以通过Swiper提供的`goTo()`方法来实现。首先，确保你已经在项目中安装了Swiper库，并在组件中引入并初始化Swiper实例。

<template>
  <div>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item, index) in items" :key="index">
        <router-link to="/page{{index + 1}}">{{ item.title }}</router-link> <!-- 或者直接写你想跳转的页面路径 -->
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { ref } from 'vue';
import SwiperCore, { Navigation } from 'swiper';

// 初始化Swiper和Navigation插件
const swiper = useSwiper({
  // ... 其他配置项
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

export default {
  setup() {
    const items = [
      // 你的数据数组
    ];

    function goToPage(pageNumber) {
      swiper.goTo(pageNumber - 1); // 由于Swiper索引从0开始，所以我们减1来对应数组索引
    }

    return {
      items,
      goToPage,
    };
  },
};
</script>

<style scoped>
/* 样式 */
.swiper-button-next, .swiper-button-prev {
  /* 添加按钮样式 */
}
</style>

然后，在你的应用中，你可以通过调用`goToPage()`函数传入目标页码：

this.goToPage(3); // 跳转到第3页

<!-- 如果你是通过点击或者其他触发事件来实现跳转 -->
this.$refs.mySwiper导航跳转
this.goToPage(目标页码);