Nuxt3中useAsyncData与useLazyAsyncData的行为疑惑

你对useAsyncData的阻塞特性理解有偏差，它的阻塞行为仅在SSR/SSG的初始页面加载阶段生效，客户端通过NuxtLink跳转时不会阻塞导航，这是Nuxt刻意设计的体验优化：

• SSR/直接访问URL场景：服务端会等待useAsyncData的Promise完成后再生成完整HTML返回，所以页面会等数据加载完毕才显示，符合你预期的阻塞行为。
• 客户端NuxtLink跳转场景：Nuxt为了避免用户感知到跳转卡顿，会立即渲染目标页面的框架（比如显示pending状态），同时后台异步加载数据。此时useAsyncData和useLazyAsyncData的表现确实一致——因为前者的阻塞逻辑在客户端路由切换时不触发。

如果确实需要在客户端跳转时阻塞导航直到数据加载完成，可以手动实现：

方案1：利用页面导航守卫 #

<!-- slow.vue -->
<template>
  <div>
    data: {{ data }} <br />
    pending: {{ pending }}
  </div>
</template>

<script setup>
let data = null
let pending = false

definePageMeta({
  async beforeRouteEnter() {
    pending = true
    // 模拟异步数据请求
    await new Promise(resolve => setTimeout(resolve, 2000))
    data = 42
    pending = false
  }
})
</script>

方案2：手动控制跳转时机 #

<!-- 跳转触发页面 -->
<template>
  <button @click="navigateToSlowPage">Go to Slow Page</button>
</template>

<script setup>
import { navigateTo } from 'nuxt/app'

async function navigateToSlowPage() {
  // 先完成数据加载
  await new Promise(resolve => setTimeout(resolve, 2000))
  // 再执行跳转
  await navigateTo('/slow')
}
</script>

内容的提问来源于stack exchange，提问作者some-user