vue3+swiper11点击跳转页面

在Vue3中结合Swiper11实现点击滑块跳转到其他页面，你可以这样做：

首先，你需要安装`@vue/swiper-component`这个库，它是一个Vue的Swiper封装组件。如果你还没有安装，可以在项目中运行 `npm install @vue/swiper-component swiper`。

接下来，在你的Vue组件里，导入并配置Swiper：

<template>
  <div>
    <swiper :options="swiperOptions" ref="mySwiper">
      <!-- 每个slide都是一个组件 -->
      <swiper-slide v-for="(item, index) in items" :key="index">
        <router-link :to="{ name: 'your-page-name', params: { slideIndex: index }}" @click.native="goToSlide(index)">
          <div>{{ item.title }}</div>
        </router-link>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import SwiperCore, { Navigation } from '@vue/swiper-component'
import { useRouter } from 'vue-router'

export default {
  components: {
    // 如果你已经创建了Swiper组件，则添加到components列表中
    Swiper,
    // 如果需要导航功能，引入Navigation组件
    [Navigation.name]: Navigation
  },
  setup() {
    SwiperCore.use([Navigation])

    const router = useRouter()
    const swiperOptions = {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // 其他swiper配置...
    }
    return { items: yourItemsArray, swiperOptions, goToSlide }
  },
  methods: {
    goToSlide(index) {
      router.push({ name: 'your-page-name', params: { slideIndex: index } }) // 点击时跳转到相应页面
    }
  }
}
</script>

在这个例子中，`items`数组存储了每个滑块的内容，包括标题。每个`swiper-slide`包裹了一个`router-link`，当用户点击滑块时，会触发`goToSlide`方法，携带当前滑块的索引作为路由参数跳转到指定的页面（这里假设页面名是`your-page-name`）。