Vue3.2.31组合式API中如何启用Swiper组件的分页功能？

要启用Swiper的分页等扩展模块，核心是将导入的模块通过Swiper组件的modules属性传入，同时完善分页配置。以下是修改后的完整可行代码：

<template>
  <swiper 
    :slides-per-view="1" 
    :pagination="{ clickable: true }"  <!-- 用对象配置支持更多自定义选项，替代单纯的true -->
    :modules="[Pagination]"           <!-- 传入注册的分页模块 -->
  >
    <swiper-slide>Foo</swiper-slide>
    <swiper-slide>Bar</swiper-slide>
  </swiper>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination } from "swiper";  // 导入分页模块
import "swiper/css";
import "swiper/css/pagination";       // 导入分页样式文件
</script>

关键说明： #

• 模块注册：Swiper Vue核心版本默认不包含扩展模块，必须手动导入Pagination后，通过modules属性传递给<swiper>组件，组件才能识别并启用分页功能。
• 分页配置：推荐用对象形式配置pagination（比如{ clickable: true }），相比单纯传true能支持更多自定义需求，比如点击分页切换、自定义元素类名等。
• 样式依赖：必须导入swiper/css/pagination，否则分页元素会缺失样式，显示异常。

如果需要启用其他扩展模块（比如导航按钮、滚动条），操作逻辑完全一致：导入对应模块，添加到modules数组即可。示例如下：

<template>
  <swiper 
    :slides-per-view="1" 
    :pagination="{ clickable: true }"
    :navigation="true"
    :modules="[Pagination, Navigation]"
  >
    <swiper-slide>Foo</swiper-slide>
    <swiper-slide>Bar</swiper-slide>
  </swiper>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation } from "swiper";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
</script>

内容的提问来源于stack exchange，提问作者Andy