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

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

✅ 正确实现方式

将内层 <a> 替换为语义中立的 <div>，并使用 vue 的 .prevent 事件修饰符阻止默认行为：

<nuxt-link
  class="content-container-cta"
  :to="'/new-page/'"
  :title="'View the full details'"
>
  <!-- 其他内容 -->
  <div
    v-if="showModal"
    @click.prevent="openModal"  <!-- 关键：阻止默认跳转 & 阻断事件冒泡 -->
    class="modal-link"
  >
    Open Modal
  </div>
  <!-- 其他内容 -->
</nuxt-link>

? 补充说明：.prevent 会调用 event.preventDefault()，消除 <nuxt-link> 的默认导航行为；同时由于 <div> 本身无原生跳转语义，不会意外触发任何 URL 导航。

⚠️ 注意事项与最佳实践

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

  <button
    v-if="showModal"
    type="button"
    @click.prevent="openModal"
    class="modal-link"
    aria-label="Open information modal"
  >
    Open Modal
  </button>

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

  <div class="content-container-cta" @click="navigateToPage">
    <!-- 内容 -->
    <button v-if="showModal" @click.stop="openModal" class="modal-link">
      Open Modal
    </button>
  </div>

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

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