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

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

✅ 正确做法：移除内部 <a>，改用 <div> 或更推荐的 <button>，并添加 .prevent 事件修饰符：

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

? 为什么推荐 <button> 而非 <div>？

• <button> 原生支持键盘交互（Enter/Space 键触发）、自动获得焦点管理及屏幕阅读器语义识别；
• 添加 type="button" 可防止表单意外提交；
• aria-label 提升无障碍体验，确保视障用户明确操作意图。

⚠️ 注意事项：

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

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