Vue3路由跳转返回后Bootstrap5 Carousel自动滑动失效如何解决

问题根因 #

Bootstrap 5的自带自动初始化逻辑仅在页面首次加载时扫描全局DOM的data-bs-*属性完成组件初始化，当你通过Vue Router跳转视图时，当前轮播组件会被Vue从DOM中卸载，原有Bootstrap轮播实例也会被销毁。当你再次返回该路由时，Vue会重新渲染轮播的DOM元素，但Bootstrap不会自动重新执行初始化逻辑，因此自动轮播的定时器没有被启动，就出现了手动切换正常、自动滑动失效的问题。

修复方案 #

你需要主动在Vue组件的生命周期钩子中控制轮播实例的初始化和销毁，具体修改如下：

1. 模板部分修改 #

给轮播元素添加ref属性替代id，避免多组件复用时id冲突问题：

<template>
  <div class="welcome">
    <!-- 把id换成ref，其余原有属性保留即可 -->
    <div ref="carouselRef" 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>

2. 脚本部分添加生命周期逻辑 #

以<script setup>语法为例，添加初始化和销毁逻辑：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
// 导入Bootstrap的Carousel组件，如果是CDN引入的Bootstrap可直接用全局bootstrap.Carousel
import { Carousel } from 'bootstrap'

const carouselRef = ref(null)
let carouselInstance = null

onMounted(() => {
  // 组件挂载后主动初始化轮播实例
  carouselInstance = new Carousel(carouselRef.value, {
    ride: 'carousel',
    interval: 3000,
    pause: false
  })
  // 手动启动轮播循环
  carouselInstance.cycle()
})

onUnmounted(() => {
  // 组件卸载前销毁轮播实例，避免内存泄漏
  if (carouselInstance) {
    carouselInstance.dispose()
    carouselInstance = null
  }
})
</script>

补充说明 #

如果你用的是Vue选项式API，把对应逻辑放到mounted和beforeUnmount钩子中即可，配置参数可以直接在初始化时传入，不用完全依赖模板上的data-bs-*属性，两种方式二选一即可。

内容的提问来源于stack exchange，提问作者Karuma