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 组件实现：

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

? 关键改进点说明：

• 移除 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 导航体验。