vue-awesome-swiper 配置分页不显示

使用 vue-awesome-swiper 的时候遇到一个问题，明明配置了分页，在页面上却没有展示出小圆点。数据量也是足够分页的。安装的 vue-awesome-swiper 是 4.1.1 版本的。

这是 html 的代码片段：

<swiper>
    <swiper-slide></swiper-slide>
    <swiper-slide></swiper-slide>
    <swiper-slide></swiper-slide>
	<div class="pagination_ele" slot="pagination"></div>
	<div class="prev_ele" slot="button-prev"></div>
	<div class="next_ele" slot="button-next"></div>
</swiper>

这是 js 代码片段：

options: any = {
	pagination: '.pagination_ele',
	navigation: {
		nextEl: '.next_ele',
		prevEl: '.prev_ele',
	},
	initialSlide: 0, //默认第几张
	loop: false, //循环
	autoplayDisableOnInteraction: false, //触摸后再次自动轮播
	autoplay: false, //每张播放时长3秒，自动播放
	speed: 400, //滑动速度
}

乍一看，没什么问题。所以开始排查问题：

首先打开 F12 看到页面上还是有 pagination 的元素存在的，只是一般情况下（pagination 设置生效的时候）看到的应该是这样的：

中间是会包含有几个 span 标签的，这几个 span 标签就是页面中的小圆点，而我的项目中最外层的 swiper-pagination 是存在的，但里面却是空的，一个 span 标签都没有。

所以我查看了 github 的 vue-awesome-swiper 的官方文档 vue-awesome-swiper | Homepage | Surmon's projects

看起来没啥问题，该有的都有，不该有的都没有。

在网上搜索了一些相关解决方案，看到了这一篇 基于vue-cli的VueAwesomeSwiper轮播滑块插件的使用及常见问题 - 简书

其中有一段话

 看了看我 4.1.1 的版本，恍然大悟！仔细一看写法还真有不一样！然后马上给分页设置改了下写法

// 原来的
pagination: '.pagination_ele',


// 修改后
pagination: {
    el: '.pagination_ele'
}

页面上的分页小圆点立马出来了，感动！！