swiper如果loop設為true，點擊事件失效而導致的不能正確定位和跳轉問題解決

html部分不需要修改。

<swiper :options="swiperOption" ref="mySwiper" v-if="swiperFlag">
  <swiper-slide v-for="(pic,index) in pics" :key="index" class="mb-4 height-17 cursor-pointer position-relative">
    <img :src="pic.src" alt="" class="full-width full-height">
    <h5 class="text-14 bg-black text-white line-height-35 px-1 opacity-15 position-absolute" style="bottom: 1px;width: 292.5px">
      <span>{{ pic.damName }}</span><span class="ml-9">{{ pic.bg }}m</span><span class="ml-4">{{ pic.zj }}MW</span><span class="fr">{{ pic.kr }}億m³</span>
    </h5>
  </swiper-slide>
</swiper>


重點在script部分進行修改
定義一個vm<script>

 import 'swiper/dist/css/swiper.css'; import { swiper, swiperSlide } from 'vue-awesome-swiper'; let vm = null; export default { components: { swiper, swiperSlide },
 created() { vm = this; },
 computed: { swiper() { return this.$refs.mySwiper.swiper; } }, data() { return { swiperFlag: false, swiperOption: { loop: true, slidesPerView: 4, spaceBetween: 10, observer: true, // 修改swiper自己或子元素時，自動初始化swiper
          observeParents: true, // 修改swiper的父元素時，自動初始化swiper
 autoplay: { delay: 2000 // 2秒切換一次
 }, onlyExternal: true, on: { click: function () { // 這里有坑，需要注意的是：this 指向的是 swpier 實例，而不是當前的 vue， 因此借助 vm，來調用 methods 里的方法
              console.log(this); // -> Swiper // 當前活動塊的索引，與activeIndex不同的是，在loop模式下不會將 復制的塊 的數量計算在內。
              vm.handleClickSlide(this); } } }, pics: [] }; }, methods: { handleClickSlide(vm) { let index = vm.clickedIndex - vm.activeIndex + vm.realIndex === 7 ? 0 : vm.clickedIndex - vm.activeIndex + vm.realIndex;
 // 我得到的index就是點擊的item在實際數組中的下標index
 console.log(index); // 后面可以根據得到的index判斷跳到每個對應的路由this.$router.push({path: `/single`}); } }, mounted() { // 這邊為調用接口獲取輪播圖片的接口this.getPicList().then(res => { res.data.map(item => { this.pics.push({ src: `/api/file/download?mongoId=${item.damImgList[0].fileName}`, damId: item.damImgList[0].damId, bg: item.damJbxx.height, zj: item.damJbxx.installedCapacity, kr: item.damJbxx.capacity, damName: item.damJbxx.damName }); }); this.swiperFlag = true; }); } }; </script>

效果圖

無論拉西瓦是第幾次出現，點擊后的index始終固定不變