Bootstrap Vue 中的轮播在导航到另一条路线并返回后停止工作

Question

我在我的（单页）Vue 3 应用程序中使用 Bootstrap 5.0.2 的 Carousel。当我最初打开页面时，轮播工作正常。但是，当我使用 Vue 路由器导航到另一个视图并返回时，Carousels 自动滑动效果停止工作。控件仍在工作，但不再有自动转换。我可以想象这与 Vue 从 DOM 中删除整个组件然后再次附加有关，但我不知道如何解决该问题。

<template>
  <div class="welcome">
    <div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-bs-ride="carousel"
         data-bs-pause="false" data-bs-interval="3000" style="width: 600px" >
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="../assets/welcome_slideshow/dummy_1.jpg" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="../assets/welcome_slideshow/dummy_2.jpg" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="../assets/welcome_slideshow/dummy_3.jpg" class="d-block w-100">
        </div>
      </div>
      <!-- controls -->
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      -->
    </div>
  </div>
</template>

Answer 1

请注意，您使用的是 BS5。我最近遇到了这个确切的问题！不是特别的解决方案，而是在经历了很多痛苦之后

  mounted () {
    // Bootstrap x Vue bug that stops the carousel working on navigating
    new bootstrap.Carousel($("#exampleSelector")).cycle()
  },

在你的导出部分重击这个。

这让它每次都能正常工作，虽然有点笨拙，但目前是一个可行的解决方法。知道有点晚了，但看到你是唯一一个受此困扰的人，也许它会对其他人有所帮助！

认为这是 Boostrap 或 Vue 的问题，可能两者都存在。

Bootstrap Vue 中的轮播在导航到另一条路线并返回后停止工作

Bootstrap Carousel in Vue stops working after navigating to another route and coming back

vue-router

vuejs3

bootstrap-5