当在 `
在 Vue 3（或 Vue 2）项目中集成 Bootstrap 5 与 Vue Router 时，一个常见需求是：点击导航项（如侧边栏或顶部导航中的
根本原因在于：Bootstrap 的 Collapse 插件会监听原生 click 事件并调用 event.preventDefault()，从而阻断
✅ 正确解法：解耦交互职责
移除
以下是优化后的 NavItem.vue 组件实现：
? 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- ✅ *@click 替代 `data-bs-**：通过@click` 绑定自定义方法，确保 Vue 生命周期可控，避免 Bootstrap 事件劫持；
- ✅ 程序化 Collapse 控制：使用 bootstrap.Collapse 实例的 .hide() 方法，精准关闭已展开的导航栏，不依赖 DOM 属性驱动；
- ✅ 路由同步无干扰：
的默认跳转逻辑不受影响，@click 回调在导航触发前执行，体验流畅； - ⚠️ 注意事项：
- 确保 bootstrap 已正确导入（如通过 npm install bootstrap 并在入口文件中引入 CSS/JS）；
- 若使用 Vue 2，请将 script setup 改为 Options API，并在 methods 中定义 collapseNavbar；
- .navbar-collapse.show 选择器需与实际 HTML 结构一致（部分模板可能用 #navbarNav 或其他 ID）；
- 如需支持键盘操作（如 Enter 键触发），可额外监听 @keyup.enter，但
默认已支持。
? 进阶建议：若项目中多处需要该行为，可封装为全局指令（如 v-collapse-on-click）或组合式函数（useNavbarCollapse()），进一步提升复用性。
通过此方案，你既能享受 Vue Router 的声明式导航优势，又能精准控制 Bootstrap 5 的交互状态，真正实现框架能力的无缝协同。
