vue3切换页面路由再返回swiper失效

问题描述：在vue3项目使用swiper插件时，进入页面swiper轮播图能正常运行，但是在切换了页面再返回有轮播的页面，轮播图就停留在第一张， 并且轮播进度指示点只有一个。

出现问题的代码

<div class="swiper-container swiper">
   <div class="swiper-wrapper">
      <div class="swiper-slide main-list list-01" :style="backgroundDiv0">
         <img v-if="!isLoading" class="list-01-img" src="" alt="">
      </div>
      <div class="swiper-slide main-list list-02" :style="backgroundDiv4"></div>
   </div>
   <div class="swiper-pagination"></div>
</div>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
  setup() {
    mySwiper = new Swiper(".swiper-container", {
      watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 14,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true
        }
     })
  }
})
</script>

问题解决

给swiper的方法加上定时器， 在onMounted中执行

<script lang="ts">
import { defineComponent} from 'vue'

export default defineComponent({
  setup() {
    let mySwiper = null
    const initSlider = async () => {
      await nextTick()
      const timer = setTimeout(()=> {
        mySwiper = new Swiper(".swiper-container", {
          watchSlidesProgress: true,
          slidesPerView: 'auto',
          centeredSlides: true,
          loop: true,
          loopedSlides: 14,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
          }
        });
        clearTimeout(timer) // 清除定时器
      }, 400)
    }
    onMounted( () => {
      initSlider()
    })
    return {
    }
  }
})
</script>

end 用完定时器记得清除