Vue Router 与 Bootstrap 折叠导航栏的兼容性解决方案

本文介绍如何解决 vue router 的 `` 组件与 bootstrap 5 的 `data-bs-toggle="collapse"` 冲突导致点击失效的问题，通过 javascript 主动控制折叠状态，实现路由跳转与导航收起的协同工作。

在使用 Bootstrap 5 构建响应式导航栏时，常需结合 Vue Router 实现 SPA 路由跳转。但直接在 上添加 data-bs-toggle="collapse" 和 data-bs-target 属性会导致点击无响应——这是因为 Bootstrap 的 collapse 插件会拦截原生点击事件并阻止默认行为，而 依赖该行为触发导航。

根本原因：Bootstrap Collapse 在初始化时为绑定元素注册了 click 事件监听器，并调用 event.preventDefault()，从而阻断了 的内部导航逻辑。

✅ 正确做法是解耦交互职责：

• 专注路由跳转；
• 折叠逻辑交由 JavaScript 显式控制（如点击后主动收起导航栏）。

以下是优化后的 NavItem.vue 组件实现：

银河易创

一站式AIGC创作平台，集成GPT-3.5、GPT-4、文心一言等对话模型、Midjourney、DallE等绘画工具、AI音乐、AI视频和AI PPT等功能！

下载

立即学习“前端免费学习笔记（深入）”；

<template>
  <li class="nav-item">
    <router-link
      class="nav-link py-2 px-md-2"
      :to="{ name: router }"
      :class="{ active: $route.name === router, [styles]: !!styles }"
      @click="collapseNavbar"
    >
      <slot />
    </router-link>
  </li>
</template>

<script>
import { onMounted } from 'vue'

export default {
  name: 'NavItem',
  props: {
    router: {
      type: String,
      required: true
    },
    styles: {
      type: String,
      default: ''
    }
  },
  setup() {
    const collapseNavbar = () => {
      const navbar = document.querySelector('.navbar-collapse.show')
      if (navbar && typeof bootstrap !== 'undefined') {
        // 确保 Bootstrap JS 已加载且 Collapse 类可用
        new bootstrap.Collapse(navbar, { toggle: false }).hide()
      }
    }

    return { collapseNavbar }
  }
}
</script>

? 关键改进点说明：

• 移除 data-bs-toggle 和 data-bs-target 属性，避免 Bootstrap 自动绑定冲突事件；
• 使用 @click 监听原生点击，在路由跳转前（或同时）主动收起导航栏；
• 利用 bootstrap.Collapse API 手动调用 .hide()，确保行为可控、可预测；
• 添加 typeof bootstrap !== 'undefined' 安全检查，防止 SSR 或未加载 Bootstrap 时报错。

⚠️ 注意事项：

• 确保项目已正确引入 Bootstrap 5 的 JavaScript（如通过 bootstrap/dist/js/bootstrap.bundle.min.js）；
• 若使用模块化导入（如 import * as bootstrap from 'bootstrap'），请在 setup() 中统一处理；
• 在移动端，建议配合 @click.prevent 仅在必要时使用，本例中 @click 已足够，因 默认行为不会与折叠逻辑冲突。

通过该方案，既保留了 Vue Router 的声明式导航能力，又复用了 Bootstrap 的折叠动画与响应式逻辑，实现专业级 SPA 导航体验。