vue-awesome-swiper使用的坑

一、 按照官网的写法

1、踩坑开始：npm install swiper vue-awesome-swiper --save
使用官网的这条命令安装的swiper及vue-awesome-swiper都为最新版（swiper 6和vue-awesome-swipe 4）

使用最新版的主要配置是
文件引入

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
// If you use Swiper 6.0.0 or higher
import 'swiper/swiper-bundle.css'

生成联动

mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    this.$nextTick(() => {
      const swiperTop = this.$refs.mySwiper.$swiper;
      const swiperThumbs = this.$refs.swiperThumbs.$swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
}

2、造成的问题
1）轮播图左右的按钮点击失效，只能使用鼠标左右滑动

2）如果使用到略缩图，会导致略缩图和顶部图联动失败，会提示controller或者control undefined

二、解决方案

造成以上问题的原因是因为两个插件的版本太高，只要降低版本即可
Swiper使用swiper4

npm i swiper@4 --save   

vue-awesome-swipe使用vue-awesome-swipe@3

npm install vue-awesome-swiper@3 --save

引入的文件改变

 import 'swiper/dist/css/swiper.css';

联动部分的$swiper改为swiper

 const swiperTop = this.$refs.mySwiper.swiper;
 const swiperThumbs = this.$refs.swiperThumbs.swiper;

至此图片左右切换按钮可点击，且联动正常