在 Nuxt 应用中， 本质是语义化 标签，因此禁止在其内部嵌套其他可点击链接（如 ）；否则会触发默认跳转行为，干扰模态框等局部交互。正确做法是用 替代内层 ，并配合 .prevent 事件修饰符阻止事件冒泡至外层 nuxt-link。

在 Nuxt 应用中，`` 本质是语义化 `W3C HTML4.01 §12.2.2），而 在渲染时会生成标准 元素。因此，你当前代码中 嵌套在 内部，会导致点击「Open Modal」时：
✅ openModal() 被执行（模态框打开）
❌ 同时触发外层 的默认跳转（导航至 /new-page/）
➡️ 返回后因路由状态已变更，模态框常被误认为“延迟显示”，实为跳转副作用。

✅ 正确实现方式

将内层 替换为语义中立的

，并使用 vue 的 .prevent 事件修饰符阻止默认行为：

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

? 补充说明：.prevent 会调用 event.preventDefault()，消除 的默认导航行为；同时由于

本身无原生跳转语义，不会意外触发任何 URL 导航。

⚠️ 注意事项与最佳实践

• 永远避免 嵌套 ：即使使用 @click.stop 也无法解决语义违规和 SEO/可访问性问题；
• 若需保留链接语义（例如「Open Modal」本身应支持键盘聚焦与回车触发），推荐改用 并添加 @click.prevent：

  <button v-if="showModal" type="button" class="modal-link" aria-label="Open information modal">
    Open Modal
  </button>

• 对于复杂交互区域，更健壮的方案是放弃包裹式 ，改用 @click 手动导航：

  <div class="content-container-cta">
    <!-- 内容 -->
    <button v-if="showModal" class="modal-link">
      Open Modal
    </button>
  </div>

  methods: {
    navigateToPage() {
      this.$router.push('/new-page/')
    }
  }

通过语义合规的 DOM 结构 + 精准的事件控制，即可彻底解耦全局导航与局部交互，确保模态框按预期响应，且页面具备良好可访问性与维护性。