前言 在做vue项目中使用vue-awesome-swiper插件做轮播图时，遇到的两个自动轮播失效问题，记录下来，也给遇到同样问题的小伙伴一个参考。
问题一：手动滑动后，自动轮播失效 【vue中使用vue-awesome-swiper做轮播 ，手动滑动、vue-router路由跳转和动态更新数据，导致自动轮播失效问题】swiperOption配置添加属性 autoplay:{ disableOnInteraction:false }，如下图：
文章图片
问题二：vue-router路由跳转后再回到轮播图页面 之前在网上查找资料：
第一种方法是初始化配置设置observe：true,observeParents:true可以解决，尝试过后发现还是不行；
第二种使用了.stopAutoplay()和.startAutoplay()，最后成功，过程中还是尝试了很久，具体操作分享如下：
step1:获得swiper对象
computed:{
swiper(){
return this.$refs.mySwiper.swiper;
}
},
step2:检测路由状态，在离开当前页面调用
stop(),重新进入调用start() watch:{
$route(newVal) {
if (newVal.meta.index !== 0) {
this.swiper.autoplay.stop();
}
else {
this.swiper.autoplay.start();
}
}
}
问题三：动态刷新数据后，轮播失效 在更新数据后调用swiper方法 slideTo()，同时可以实现刷新数据后图片回到第一张开始轮播
文章图片
有什么问题，欢迎留言评论。
推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端开发|Vue2.x API 学习
- vue|Vue面试常用详细总结
- vue|电商后台管理系统(vue+python|node.js)
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- Vue|vue-router 详解
- vue|vue3替代vuex的框架piniajs实例教程
- Vue|Vue3.0的插槽是如何实现的（）
- 前端|面试官（谈谈Vue和React的区别（））