本文介绍如何解决 vue router 的 `
在使用 Bootstrap 5 构建响应式导航栏时，常需结合 Vue Router 实现 SPA 路由跳转。但直接在 <router-link> 上添加 data-bs-toggle="collapse" 和 data-bs-target 属性会导致点击无响应——这是因为 Bootstrap 的 collapse 插件会拦截原生点击事件并阻止默认行为，而 <router-link> 依赖该行为触发导航。
根本原因：Bootstrap Collapse 在初始化时为绑定元素注册了 click 事件监听器，并调用 event.preventDefault()，从而阻断了 <router-link> 的内部导航逻辑。
✅ 正确做法是解耦交互职责：
- <router-link> 专注路由跳转；
- 折叠逻辑交由 JavaScript 显式控制（如点击后主动收起导航栏）。
以下是优化后的 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>
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 已足够，因 <router-link> 默认行为不会与折叠逻辑冲突。
通过该方案，既保留了 Vue Router 的声明式导航能力，又复用了 Bootstrap 的折叠动画与响应式逻辑，实现专业级 SPA 导航体验。
