当在 `
在 Vue 3（或 Vue 2）项目中集成 Bootstrap 5 时，开发者常希望点击导航项既能触发 Vue Router 跳转，又能自动收起移动端折叠的导航栏（.navbar-collapse）。但直接将 data-bs-toggle="collapse" 和 data-bs-target=".navbar-collapse.show" 添加到 <router-link> 元素上会导致链接失去响应——因为 Bootstrap 的 Collapse 插件在初始化时会为带 data-bs-toggle 的元素绑定 click 事件监听器，并调用 event.preventDefault()，从而阻断 <router-link> 内部的 <a> 标签默认跳转行为。
✅ 正确做法是解耦交互职责：
- <router-link> 专注路由导航；
- 收起导航栏交由 JavaScript 主动控制（而非依赖 data-bs-* 声明式行为）。
以下是优化后的 NavItem.vue 组件实现：
<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 setup>
import { useRouter } from 'vue-router';
import * as bootstrap from 'bootstrap';
const props = defineProps({
router: {
type: String,
required: true,
},
styles: {
type: String,
default: '',
},
});
const router = useRouter();
const collapseNavbar = () => {
const navbarCollapse = document.querySelector('.navbar-collapse.show');
if (navbarCollapse) {
// 使用 Bootstrap 5 的 Collapse 实例主动隐藏
const collapseInstance = bootstrap.Collapse.getInstance(navbarCollapse);
if (collapseInstance) {
collapseInstance.hide();
} else {
new bootstrap.Collapse(navbarCollapse, { toggle: false }).hide();
}
}
};
</script>? 关键说明：
立即学习“前端免费学习笔记（深入）”；
- 使用 @click="collapseNavbar" 替代 data-bs-toggle，确保点击时先执行收起逻辑，再由 <router-link> 自动完成导航（Vue Router 默认允许事件冒泡，且不阻止默认行为）；
- 通过 bootstrap.Collapse.getInstance() 复用已存在的实例，避免重复初始化；
- :class="{ active: $route.name === router, [styles]: !!styles }" 修正了原始代码中 $router.name（应为 $route.name）及动态类名绑定语法；
- 若项目未全局引入 Bootstrap JS，需确保 bootstrap 已正确安装（npm install bootstrap）并在入口文件中导入 CSS 与 JS（或按需导入）。
? 额外建议：
对于更复杂的导航交互（如带下拉菜单），可进一步封装 useBootstrapCollapse() 组合式函数，提升复用性。同时，务必在 SPA 中监听路由变化后检查 .navbar-collapse.show 状态，避免页面跳转后导航栏仍处于展开态影响 UX。
该方案兼顾语义清晰、逻辑可控与框架兼容性，是 Vue + Bootstrap 混合开发中的推荐实践。
