解决vue中使用swiper的loop循环失效和路由跳转回来后自动轮播失效需要手动滑动才能重新开始轮播

一、loop循环失效：

vue中使用v-for循环加载swiper的组件时

<div class='swiper__content'>
       <swiper :options="swiperOption" ref="mySwiper" class="swiper__content-item">
           <swiper-slide class="swiper-list" v-for="(item, index) in headerNotice" :key='index'>
               <div class="item-wrapper">
                   {{ item.content }}
               </div>
           </swiper-slide>
       </swiper>
   </div>

data数据为：

data() {
        return {
            swiperOption: {
                direction: 'vertical',
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false
                },
                loop: true
            },
            headerNotice: [
                {
                    content: 1,
                },{
                    content: 2,
                },{
                    content: 3,
                }
            ]
        };
    },

即使是设置了loop：true 还是不能无缝轮播
原因： loop设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的， 可是在vue的v-for中时，异步加载的数据都还没有返回时，就先加载了Swiper组件并复制了sliper

解决办法： 利用v-if的属性，v-if=showProduct.length，确保异步加载的数据已经返回后，再加载swiper组件

<div class='swiper__content' v-if='headerNotice && headerNotice.length > 0'>
            <swiper :options="swiperOption" ref="mySwiper" class="swiper__content-item">
                <swiper-slide class="swiper-list" v-for="(item, index) in headerNotice" :key='index'>
                    <div class="item-wrapper">
                        {{ item.content }}
                    </div>
                </swiper-slide>
            </swiper>
        </div>

还有一种办法就是直接设置定时器然后调用切换到下一个

var mySwiper = new Swiper('.swiper-container');
setInterval(function() {
	mySwiper.slideNext();
}, 1000)

二、当路由跳转回来后轮播失效，需要手动滑动一下才自动轮播的问题解决：
如果vue使用了缓存，当路由跳转回来时候swiper的自动轮播会失效，可以尝试重新渲染页面，使用v-if来实现.
template中：

<div v-if='reRender'>
<div class='swiper__content' v-if='headerNotice && headerNotice.length > 0'>
     <swiper :options="swiperOption" ref="mySwiper" class="swiper__content-item">
           <swiper-slide class="swiper-list" v-for="(item, index) in headerNotice" :key='index'>
               <div class="item-wrapper">
                   {{ item.content }}
               </div>
           </swiper-slide>
       </swiper>
   </div>
</div>

script中的activated中：

data() {
        return {
            swiperOption: {
                direction: 'vertical',
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false
                },
                loop: true
            },
            headerNotice: [
                {
                    content: 1,
                },{
                    content: 2,
                },{
                    content: 3,
                }
            ],
            reRender: false
        };
    },
activated() {
        this.reRender = false;
        setTimeout(() => {
            this.reRender = true;
        }, 100);
    }