NuxtJS中asyncData获取API数据后UI未更新问题求助

排查与修复步骤 #

1. 确认Axios模块已正确配置 #

代码里用到了$axios，但如果没安装并配置@nuxtjs/axios模块，会直接导致请求失败，页面拿不到数据：

• 先安装模块：

npm install @nuxtjs/axios

• 在nuxt.config.js的modules数组中添加配置：

modules: [
  '@nuxtjs/axios',
],

2. 给asyncData加上错误捕获 #

当前代码没有错误处理逻辑，一旦API请求出错（比如网络问题、接口返回错误），post会变成undefined，页面就没内容显示。修改asyncData部分：

async asyncData({ $axios, params, error }) {
  try {
    const { data } = await $axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
    return { post: data };
  } catch (err) {
    error({ statusCode: 404, message: '文章不存在' });
    console.error('请求失败:', err);
  }
},

3. 移除data中的post初始值（推荐） #

asyncData返回的post会覆盖data里的同名变量，但保留初始值可能干扰调试——如果请求失败，初始值会显示，容易让你误以为请求成功。直接删掉data里的post定义即可。

4. 验证路由参数是否正确传递 #

在asyncData里打印params，确认能拿到正确的id：

async asyncData({ $axios, params }) {
  console.log('当前路由参数:', params); // 应该能看到{ id: '2' }
  const { data } = await $axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  return { post: data };
},

如果拿不到id，检查路由文件路径是否正确（pages/post/_id.vue有没有拼写错误）。

5. 优化模板的判断逻辑 #

当前v-if="post"的判断太宽松，如果请求返回空对象也会不显示。可以改成更精准的判断：

<div v-if="post?.title" id="first-post">

或者加上v-else显示提示：

<div v-else>
  <p>加载中或文章不存在</p>
</div>

修改后的完整代码示例 #

<template>
  <div>
    <h1>Post</h1>
    <div v-if="post" id="first-post">
      <h4> HELLO </h4>
      <h3 class="text-lg">{{ post.title }}</h3>
      <p class="text-base">{{ post.body }}</p>
    </div>
    <div v-else>
      <p>加载中或文章不存在</p>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, params, error }) {
    try {
      console.log('路由参数:', params);
      const { data } = await $axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
      return { post: data };
    } catch (err) {
      error({ statusCode: 404, message: '文章不存在' });
      console.error('请求错误:', err);
    }
  }
};
</script>

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