swiper6无法显示分页

今天在nuxt项目中使用swiper，无法显示分页，而且在swiper-pagination类标签里面空空如也
安装命令：

npm install swiper vue-awesome-swiper --save

# or
yarn add swiper vue-awesome-swiper

当时安装的版本如下：

"swiper": "^6.4.1",
"vue-awesome-swiper": "^4.1.1"

代码如下：

<swiper ref="mySwiper" :options="swiperOptions">
  <swiper-slide :key="1">
    <img src="../assets/img/pic-banner.jpg" alt="">
  </swiper-slide>
  <swiper-slide :key="2">
    <img src="../assets/img/pic-banner.jpg" alt="">
  </swiper-slide>
  <div slot="pagination" class="swiper-pagination" />
</swiper>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

export default {
  name: 'Index',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: { delay: 4000 }
      }
    }
  }
}
</script>

后来发现是swiper的版本太高了引起的，修改package.json降低版本即可

"swiper": "5.3.7",
"vue-awesome-swiper": "4.1.1"

这时导入CSS的方式也要改下 import ‘swiper/css/swiper.css’

来个完整的

<div class="index">
    <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide :key="1">
        <img src="../assets/img/pic-banner.jpg" alt="">
        </swiper-slide>
        <swiper-slide :key="2">
        <img src="../assets/img/pic-banner.jpg" alt="">
        </swiper-slide>
        <div slot="pagination" class="swiper-pagination" />
        <div slot="button-next" class="swiper-button-next" />
        <div slot="button-prev" class="swiper-button-prev" />
    </swiper>
</div>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'Index',
  // async asyncData ({ params, $axios }) {
  //   const { data } = await $axios.get(`https://my-api/posts/${params.id}`)
  //   return { title: data.title }
  // },
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      title: '首页',
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          // 分页可以点击
          clickable: true,
          // 激活的分页小圆点样式
          bulletActiveClass: 'swiper-bullet-active'
        },
        loop: true,
        autoplay: { delay: 4000 },
        // 左右导航
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted () {
    // 悬浮时显示导航菜单
    this.swiper.el.onmouseover = function () {
      this.swiper.navigation.$nextEl.css('display', 'block')
      this.swiper.navigation.$prevEl.css('display', 'block')
    }
    this.swiper.el.onmouseleave = function () {
      this.swiper.navigation.$nextEl.css('display', 'none')
      this.swiper.navigation.$prevEl.css('display', 'none')
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ]
    }
  }
}
</script>

<style lang="less">
@theme-color: #c91c1c;
.swiper-button-prev,.swiper-button-next{
    display: none;
 }
 .swiper-pagination-bullet.swiper-bullet-active{
  background: @theme-color;
  opacity: 1;
}
.swiper-container{
  --swiper-navigation-color: @theme-color;/* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px;/* 设置按钮大小 */
}
</style>