在 容器内点击子元素（如“Open Modal”）时，浏览器默认会触发外层链接跳转，导致模态框无法正常打开。根本解决方案是避免非法嵌套 标签，改用 @click.prevent 阻止事件冒泡，并以语义化、可访问的 或 替代内部 。

在 `` 容器内点击子元素（如“open modal”）时，浏览器默认会触发外层链接跳转，导致模态框无法正常打开。根本解决方案是避免非法嵌套 `w3c html4.01 §12.2.2），而 在渲染后本质就是一个 元素。因此，将 直接置于 内部不仅违反语义规范，还会引发事件捕获与冒泡逻辑混乱——点击“open modal”时，click 事件会向上冒泡至外层 ，最终触发路由跳转，而非执行 openmodal()。

✅ 正确做法：移除内部 ，改用

或更推荐的 ，并添加 .prevent 事件修饰符：

<nuxt-link class="content-container-cta" :to="'/new-page/'" :title="'View the full details'"><!-- 其他内容 --><button v-if="showModal" class="modal-link" type="button" aria-label="Open information modal">
    Open Modal
  </button>
  <!-- 其他内容 -->
</nuxt-link>

? 为什么推荐

而非

？

原生支持键盘交互（Enter/Space 键触发）、自动获得焦点管理及屏幕阅读器语义识别；

添加 type="button" 可防止表单意外提交；

aria-label 提升无障碍体验，确保视障用户明确操作意图。

⚠️ 注意事项：

• 切勿对 使用 @click.native.prevent 来“拦截”内部点击——这会同时阻止所有外层导航行为，违背设计初衷；
• 若需保留链接样式（如下划线、颜色），可通过 CSS 为 设置 appearance: none; background: none; border: none; 并复用 .modal-link 类；
• 确保 openModal() 方法中不包含 router.push() 或 window.location 等跳转逻辑，避免与 行为耦合。

? 扩展建议：对于高频复用场景，可封装为自定义组件（如 ），内部统一处理区域划分（主区域跳转 / 操作区触发动作），提升可维护性与一致性。