Vue 3.x搭配Bootstrap 5.x标签页如何实现未激活组件懒加载不预挂载

实现方案 #

以下两种方案均可100%保留Bootstrap 5原生样式与交互逻辑，同时实现组件仅在标签激活时挂载的需求：

方案1：条件渲染+Bootstrap事件监听（改动最小，适配现有代码结构）

核心逻辑是通过v-if控制组件挂载状态，监听Bootstrap原生标签切换事件同步激活状态，同时支持路由同步。

1. 修改模板结构，给每个组件添加条件渲染判断：

<div class="tab-content mt-5" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <Home v-if="activeTab === 'home'"/>
  </div>
  <div class="tab-pane fade" id="new-car" role="tabpanel" aria-labelledby="new-car-tab">
    <Car v-if="activeTab === 'new-car'"/>
  </div>
  <div class="tab-pane fade" id="scan-barcode" role="tabpanel" aria-labelledby="scan-barcode-tab">
    <ScanBarcode v-if="activeTab === 'scan-barcode'"/>
  </div>
  <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
    <About v-if="activeTab === 'about'"/>
  </div>
</div>

2. 逻辑层配置，同步标签状态与路由：

// 可选：配合Vue异步组件实现代码分包，进一步降低首屏加载体积
import { defineAsyncComponent } from 'vue'
const Home = defineAsyncComponent(() => import('./Home.vue'))
const Car = defineAsyncComponent(() => import('./Car.vue'))
const ScanBarcode = defineAsyncComponent(() => import('./ScanBarcode.vue'))
const About = defineAsyncComponent(() => import('./About.vue'))

export default {
  components: { Home, Car, ScanBarcode, About },
  data() {
    return {
      activeTab: 'home'
    }
  },
  mounted() {
    // 监听Bootstrap5标签切换完成事件
    const tabList = document.querySelectorAll('[data-bs-toggle="tab"]')
    import('bootstrap').then(bs => {
      tabList.forEach(tab => {
        tab.addEventListener('shown.bs.tab', (e) => {
          const targetPaneId = e.target.getAttribute('data-bs-target').slice(1)
          this.activeTab = targetPaneId
          // 同步路由状态，支持浏览器前进后退
          this.$router.push({ query: { tab: targetPaneId } })
        })
      })
      // 页面初始化时读取路由参数激活对应标签
      const initTab = this.$route.query.tab || 'home'
      const initTabEl = document.querySelector(`[data-bs-target="#${initTab}"]`)
      if (initTabEl) new bs.Tab(initTabEl).show()
    })
    // 监听路由变化自动切换标签
    this.$watch('$route.query.tab', (newTab) => {
      if (newTab && newTab !== this.activeTab) {
        const tabEl = document.querySelector(`[data-bs-target="#${newTab}"]`)
        if (tabEl) new bs.Tab(tabEl).show()
      }
    })
  }
}

方案2：嵌套路由实现（原生支持路由跳转，适合多场景复用）

核心逻辑是将每个标签对应为子路由，通过router-view渲染组件，天然支持this.$router.push跳转逻辑。

1. 配置路由规则：

// router/index.js
const routes = [
  {
    path: '/dashboard', // 父页面路径
    component: () => import('./Dashboard.vue'), // 你的标签页父组件
    children: [
      { path: '', redirect: 'home' },
      { path: 'home', component: () => import('./Home.vue'), name: 'Home' },
      { path: 'new-car', component: () => import('./Car.vue'), name: 'NewCar' },
      { path: 'scan-barcode', component: () => import('./ScanBarcode.vue'), name: 'ScanBarcode' },
      { path: 'about', component: () => import('./About.vue'), name: 'About' }
    ]
  }
]

2. 修改父页面模板：

<div class="tab-content mt-5" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <router-view v-if="$route.name === 'Home'"></router-view>
  </div>
  <div class="tab-pane fade" id="new-car" role="tabpanel" aria-labelledby="new-car-tab">
    <router-view v-if="$route.name === 'NewCar'"></router-view>
  </div>
  <!-- 其余标签同理配置 -->
</div>

3. 监听Bootstrap标签切换事件，切换时调用this.$router.push跳转到对应子路由即可。

注意事项 #

• 扫码组件需在beforeUnmount生命周期中释放摄像头流，避免标签切换后资源未释放的问题
• 如果需要保留标签切换前的组件状态，可将v-if替换为v-show，同时将组件初始化逻辑移到标签激活的回调中执行

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