本文介绍如何解决 vue router 的 `
在使用 Bootstrap 5 构建响应式导航栏时，常需结合 Vue Router 实现 SPA 路由跳转。但直接在
根本原因：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 导航体验。
