1. 解决：昆山博奥苑 数据预警 swiper轮播点击失效
3. 核心：点击事件绑定在swiper里面，而不是在vue template div上面。因为swiper在looptrue的时候会多复制2个假的，点击会无效。
通过在swiper上绑点击，通过let index = vm.clickedIndex - vm.activeIndex + vm.realIndex;拿到真的index，将复制的2个index处理
4. 代码：
swiperOption: { slidesPerView: 5, speed: 3000, loop: true, observer: true, // 修改swiper自己或子元素时，自动初始化swiper observeParents: true, // 修改swiper的父元素时，自动初始化swiper clicks: { preventClicksPropagation: false, }, direction: "vertical", autoplay: { autoplay: true, delay: 1000, disableOnInteraction: false, }, on: { click: function () { // 这里有坑，需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法 console.log(this); // console.log(this.$children[0].data.id); // click改为箭头函数可以this就变成vue可以通过vue获取id // let id = this.$children[0].data.id; vm.handleClickSlide(this); // vm.showDetail(id); }, }, }, handleClickSlide(vm) { // 注意这样拿到的是真的list里面的index, 但looptrue的时候，会多复制2个index,需要手动变下，才可以实现和list的index完全对应 // 在swiper里注册点击事件，loop true复制的2个假的才可以被点击上，所以点击事件不写在vuetemplate的div上面 // 关键词： swiper loop true点击失效 let index = vm.clickedIndex - vm.activeIndex + vm.realIndex; if (index === this.list.length) { index = 0; } else if (index === this.list.length +1) { index = 1; } else if (index === this.list.length +2) { index = 2; } // 我得到的index就是点击的item在实际数组中的下标index console.log(index); // console.log(this.list[index].id); // 后面可以根据得到的index判断跳到每个对应的路由this.$router.push({path: `/single`}); this.showDetail(this.list[index].id); },