一，安装

npm install vue-awesome-swiper --save
// npm install vue-awesome-swiper@3.x --save

我安装的版本是
“swiper”: “^6.6.1”,
“vue-awesome-swiper”: “^3.1.3”,

在使用vue-awesome-swiper组件的时候，缩略图无法和大图实现联动，百度了半天终于发现了一个解决办法。
官方代码：

<template><div class="thumb-example"><!-- swiper1 --><swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop"><swiper-slide class="slide-1"></swiper-slide><swiper-slide class="slide-2"></swiper-slide><swiper-slide class="slide-3"></swiper-slide><swiper-slide class="slide-4"></swiper-slide><swiper-slide class="slide-5"></swiper-slide><div class="swiper-button-next swiper-button-white" slot="button-next"></div><div class="swiper-button-prev swiper-button-white" slot="button-prev"></div></swiper><!-- swiper2 Thumbs --><swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs"><swiper-slide class="slide-1"></swiper-slide><swiper-slide class="slide-2"></swiper-slide><swiper-slide class="slide-3"></swiper-slide><swiper-slide class="slide-4"></swiper-slide><swiper-slide class="slide-5"></swiper-slide></swiper></div>
</template><script>import { swiper, swiperSlide } from 'vue-awesome-swiper'// >= Swiper 6.ximport 'swiper/swiper-bundle.css'export default {name: 'swiper-example-thumbs-gallery',title: 'Thumbs gallery with Two-way control',components: {swiper,swiperSlide},data() {return {swiperOptionTop: {loop: true,loopedSlides: 5, // looped slides should be the samespaceBetween: 10,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'}},swiperOptionThumbs: {loop: true,loopedSlides: 5, // looped slides should be the samespaceBetween: 10,centeredSlides: true,slidesPerView: 'auto',touchRatio: 0.2,slideToClickedSlide: true}}},mounted() {this.$nextTick(() => {// 实现swiper双向控制   最后添加控制器实现双向控制（要在updated中添加，在mounted中添加会underfind）// const swiperTop = this.$refs.swiperTop.$swiper// const swiperThumbs = this.$refs.swiperThumbs.$swiper// 3.0版本不需要 $const swiperTop = this.$refs.swiperTop.swiperconst swiperThumbs = this.$refs.swiperThumbs.swiperswiperTop.controller.control = swiperThumbsswiperThumbs.controller.control = swiperTop})}}
</script><style lang="scss" scoped>.thumb-example {height: 480px;background-color: #000;}.swiper {.swiper-slide {background-size: cover;background-position: center;&.slide-1 {background-image:url('~@/assets/img/nature1.jpg');}&.slide-2 {background-image:url('~@/assets/img/nature2.jpg');}&.slide-3 {background-image:url('~@/assets/img/nature4.jpg');}&.slide-4 {background-image:url('~@/assets/img/nature5.jpg');}&.slide-5 {background-image:url('~@/assets/img/nature6.jpg');}}&.gallery-top {height: 80%;width: 100%;}&.gallery-thumbs {height: 20%;box-sizing: border-box;padding: 10px 0;}&.gallery-thumbs .swiper-slide {width: 25%;height: 100%;opacity: 0.4;}&.gallery-thumbs .swiper-slide-active {opacity: 1;}}
</style>

将mounted中的代码进行修改：

const swiperTop = this.$refs.swiperTop.$el.swiper
const swiperThumbs = this.$refs.swiperThumbs.$el.swiper