Vue.js+Bootstrap响应式导航栏移动端菜单失效问题排查

问题核心分析 #

你当前使用Bootstrap原生的data-toggle/data-target属性实现菜单切换，但在Vue项目中这类原生交互可能因以下原因失效：

• Bootstrap JS未正确引入：仅引入Bootstrap CSS无法触发data-*属性的交互逻辑，必须配套引入Bootstrap的JS文件（建议用包含Popper的bundle版本）。
• 重复的collapse类：侧边栏代码中重复声明了collapse类（class="collapse d-lg-block sidebar collapse bg-white"），这会干扰Bootstrap的样式识别与JS逻辑绑定。
• DOM生命周期不匹配：如果侧边栏是动态渲染的，Bootstrap的初始化可能在Vue完成DOM挂载前执行，导致事件绑定失败。

解决方案 #

1. 确保Bootstrap JS正确引入

如果通过npm安装Bootstrap，在main.js中添加：

import 'bootstrap/dist/js/bootstrap.bundle.min.js'

如果用CDN，在public/index.html的<body>末尾添加：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. 清理重复的CSS类

修改侧边栏的class属性，移除重复的collapse：

<nav id="sidebarMenu" class="collapse d-lg-block sidebar bg-white">

3. 改用Vue响应式绑定（推荐）

放弃原生data-*属性，用Vue的响应式变量控制菜单状态，更符合Vue项目的开发习惯：

<script setup>
import { ref } from 'vue'
const isSidebarOpen = ref(false)
</script>

<template>
  <!-- 切换按钮 -->
  <button
    class="navbar-toggler"
    type="button"
    @click="isSidebarOpen = !isSidebarOpen"
    aria-controls="sidebarMenu"
    :aria-expanded="isSidebarOpen"
    aria-label="Toggle navigation"
  >
    <i class="fas fa-bars"></i>
  </button>

  <!-- 侧边栏 -->
  <nav 
    id="sidebarMenu" 
    class="sidebar bg-white" 
    :class="{ 
      'collapse': !isSidebarOpen,
      'd-lg-block': true 
    }"
  >
    <!-- 侧边栏内容 -->
  </nav>
</template>

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