vue-awesome-swiper 使用swiper 6.x版本导致分页器不显示的问题解决方案

使用 vue-awesome-swiper 最新版的小伙伴可能会遇到一个比较棘手的问题，就是分页器使用文档中的样例代码死活加载不出来，根本就不渲染分页器，解决方法可以选择降版本，将 swiper 的版本降回 5.x、vue-awesome-swiper 的版本降回 3.x，分页器就显示出来了，但如果不想降版本，解决方法如下（直接干货）：

Vue.js 版本和组件版本

• vue@2.6.11
• swiper@6.0.2
• vue-awesome-swiper@4.1.1

import Vue from 'vue'
import {Swiper as SwiperClass, Pagination, Navigation, Mousewheel, Autoplay} from 'swiper/swiper.esm'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

SwiperClass.use([Pagination, Mousewheel, Navigation, Autoplay])
Vue.use(getAwesomeSwiper(SwiperClass))
const {Swiper, SwiperSlide} = getAwesomeSwiper(SwiperClass)

// import style
import 'swiper/swiper-bundle.min.css'

然后分页器就可以正常渲染了，如果是使用swiper作为directive的小伙伴可以用如下方式：

<!-- You can find this swiper instance object in current component by the "mySwiper"  -->
<div v-swiper:mySwiper="swiperOptions">

import 'swiper/swiper-bundle.min.css'
import LazyHydrate from 'vue-lazy-hydration'
import {Swiper as SwiperClass, Pagination, Navigation} from 'swiper/swiper.esm.js'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

// Swiper modules
SwiperClass.use([Pagination, Navigation])

// local component
const {directive} = getAwesomeSwiper(SwiperClass)

export default {
  directives: {
    swiper: directive
  },
  // Your specific code will go here
}