Nuxtjs 3页面跳转需求：数据加载完成后再渲染目标页面

问题分析 #

你当前的问题是页面B的数据获取逻辑放在了methods中，这类方法通常在页面挂载后才调用，导致页面先渲染、后加载数据。要实现跳转时先完成API请求再渲染页面，需要利用Nuxt3提供的页面数据预获取机制。

解决方案 #

方案1：使用组合式API（Nuxt3推荐方式） #

将数据获取逻辑直接写在<script setup>中，利用useFetch（useAsyncData的封装）自动完成预获取：

<template>
  <!-- 有数据时渲染内容，无数据时显示加载状态 -->
  <div v-if="pageConfig">
    content ...
    {{ pageConfig }}
  </div>
  <div v-else>
    加载中...
  </div>
</template>

<script setup>
// 获取运行时配置
const runtimeConfig = useRuntimeConfig()

// 直接使用useFetch预获取数据，路由跳转时会先完成请求
const { data: pageConfig, error } = await useFetch(
  () => runtimeConfig.public.apiBase + '/website/fetch/index',
  {
    method: "GET",
    credentials: 'include'
  }
)

// 处理请求错误
if (error.value) {
  alert("error")
  console.log(error.value.data)
}
</script>

方案2：使用选项式API #

如果仍在使用选项式API，可通过asyncData钩子实现预获取（该钩子会在组件创建前执行）：

<template>
  <div>
    content ...
    {{ pageConfig }}
  </div>
</template>

<script>
export default {
  async asyncData({ $config }) {
    try {
      const { data } = await useFetch(
        $config.public.apiBase + '/website/fetch/index',
        {
          method: "GET",
          credentials: 'include'
        }
      )
      // 返回的数据会直接注入到组件的data中
      return { pageConfig: data.value }
    } catch (err) {
      alert("error")
      console.log(err.response._data)
      return { pageConfig: null }
    }
  }
}
</script>

关键说明 #

• 避免将数据获取放在methods并通过mounted等生命周期调用，这类方式是客户端挂载后才触发，无法实现预加载。
• useFetch/asyncData会在通过NuxtLink跳转时，提前发起API请求，等待数据返回后再渲染目标页面，完全符合你的需求。
• 注意修正拼写错误：runTimeConfig应为runtimeConfig。

内容的提问来源于stack exchange，提问作者diyifi3030