Javascript 引导4转盘在Vue.js中更改路线时不滑动

我完全知道Bootstrap有Vue Bootstrap来支持它。但由于我使用的是我公司的遗留代码，所以更改它花费了很多时间，因为网站本身使用Bootstrap4作为基础。但是我在尝试实现bootstrap4

Carousel

时遇到了这个问题。当我刷新页面时，转盘工作正常，没有任何问题。但是，当我将路径（例如从

/task

更改为

/home

时，就会出现此问题。如果我刷新其中一条路线，转盘将正常工作，但当我尝试更改路线时，

转盘将停止工作

这是我的组件代码：

<template>
  <div>
    <!-- Start Cover Section -->
    <div class="wow fadeIn">
      <div
        id="carousel"
        class="carousel slide carousel-fade"
        data-ride="carousel"
      >
        <div class="cover-container desktop">
          <h1 class="title">
            <b>{{ titleUpper }}</b> <br />
            <span class="mini-title">{{ titleUnder }}</span>
          </h1>
        </div>

        <div class="cover-mobile-container mobile">
          <div class="row justify-content-center">
            <div class="col">
              <h1 class="title">
                <b>{{ titleUpper }}</b> <br />
                {{ titleUnder }}
              </h1>
            </div>
          </div>
        </div>

        <div class="carousel-inner">
          <div class="carousel-item active img-cover-1"></div>
          <div class="carousel-item img-cover-2"></div>
          <div class="carousel-item img-cover-3"></div>
        </div>
      </div>
    </div>
    <!-- End Cover Section -->
  </div>
</template>

因此，我只是想知道有没有解决这个问题的办法，而不是将其改为Vue引导

<script>
export default {
  props: {
    titleUpper: {
      type: String,
      default: "Company"
    },
    titleUnder: {
      type: String,
      default: "Section"
    }
  },
  name: "Cover",
  data() {
    return {
      message: ""
    };
  },
};
</script>

.img-cover-1 {
  background: url("https://via.placeholder.com/1920x1080");
  background-size: cover;
  background-blend-mode: multiply;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}

.img-cover-2 {
  background: url("https://via.placeholder.com/1920x1080");
  background-size: cover;
  background-blend-mode: multiply;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}

.img-cover-3 {
  background: url("https://via.placeholder.com/1920x1080");
  background-size: cover;
  background-blend-mode: multiply;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}