Bootstrap 5按钮折叠与链接跳转分离方法
在 Nuxt 2 与 Bootstrap 5 的 SSR 应用中，若将 链接嵌套在控制折叠的 内，点击链接会意外触发折叠切换。即使使用 Vue 的 @click.stop 修饰符也无法阻止，其根本原因在于 Bootstrap 的原生 JavaScript 事件监听机制与 Vue 的事件系统存在冲突。
在 Nuxt 2 与 Bootstrap 5 的 SSR 应用中，若将 链接嵌套在控制折叠的
许多开发者在 Nuxt 2 项目中集成 Bootstrap 5 时，都遇到过这样一个问题：一个用于控制内容折叠的按钮内部包含了一个跳转链接。点击该链接时，不仅会执行预期的跳转，还会同时触发父按钮控制的折叠面板展开或关闭。即便为链接添加了 Vue 的 @click.stop 修饰符，问题依然存在。
问题根源：事件系统冲突
这一问题的核心在于两套事件处理机制的冲突。Bootstrap 5 的 Collapse 组件使用原生 JavaScript 实现，它通过 addEventListener 直接监听所有具有 data-bs-toggle="collapse" 属性的按钮的点击事件。这种监听是“贪婪”的，它会捕获发生在按钮元素及其内部任何子元素（如图标或链接）上的所有点击。
而 Vue 的 @click.stop 修饰符仅在 Vue 自身的虚拟 DOM 事件系统中生效，用于阻止事件在组件树中冒泡。当点击事件传递到真实 DOM 时，Bootstrap 的原生监听器已经直接捕获了来自子元素的事件，因此 Vue 层面的事件阻止无法生效。
解决方案：结构分离与职责明确
根本的解决思路是进行结构上的物理隔离，让交互元素各司其职。不应再将链接嵌套在按钮内部，而是将控制折叠的按钮和执行跳转的链接设置为 DOM 结构中的同级（兄弟）元素。视觉上的排列则完全通过 CSS（如 Flexbox）来实现。
以下是一个经过验证的推荐方案代码：
方案关键要点解析
此方案遵循了稳健的前端开发原则，以下是其核心设计要点：
结构解耦
的职责被严格限定为控制折叠；跳转或预览动作则由独立的 标签负责。两者在 DOM 层级上平行，从根源上杜绝了事件冲突。
事件修饰符的正确使用
在独立的链接上，使用 @click.prevent 来阻止 标签的默认跳转行为，同时配合 target="_blank" 可在新标签页安全打开。所有相关业务逻辑（如埋点、权限校验）可统一封装在 handleFileView() 方法中，提升代码可维护性。
无障碍访问增强
结构分离后，建议为独立操作链接添加清晰的 aria-label 属性，例如 :aria-label="Ver archivo: ${file.original_filename}"，以提升屏幕阅读器用户的体验。
保持样式一致性
利用 Bootstrap 5 的工具类（如 d-flex, gap-2, btn-link）进行布局，可以轻松实现视觉对齐，确保结构变化不影响整体 UI 设计。
Nuxt 2 SSR 环境注意事项
在 Nuxt 2 的 SSR 环境中，需确保 bootstrap.bundle.js 已在 nuxt.config.js 的 script 配置中正确引入。同时注意，Collapse 等依赖 DOM 操作的插件初始化必须在客户端完成，以避免服务端渲染带来的问题。
最后，应避免采用治标不治本的“捷径”，例如试图通过 @click.native.stop 或在嵌套链接中手动调用 e.stopPropagation() 来解决问题。这在 SSR 场景下极易引发 hydration（水合）不匹配错误。保持结构清晰与语义明确，始终是前端组件化开发最稳健的实践基础。