VUE中async asyncData获取数据后根据结果显示不同的页面内容

关注

原创最新推荐文章于 2026-10-28 18:40:40 发布 728 阅读 AI 写同款· GEO 优化 ›

nuxtjs中asyncData异步数据请求、代理配置、fetch网络请求、vuex的使用、中间件处理它可以在服务端或路由更新之前被调用。注意：在上面的案例中，虽然是服务端渲染，但还是需要后端做跨域处理，因为单单刷新当前请求数据的页面（或者是地址栏回车）时，由于是服务端渲染，所以不存在跨域，但是如果时通过路由跳转到当前页面时，就会出现跨域问题。我们在第一小节中就知道，asyncData 方法只能在页面组件中使用，而子组件在 components 中，假如我们现在要将网络请求写在子组件中，该怎么做呢？// 如果在此处你进行网络请求，在没有设置baseUrl或代理时，请一定要写全路径，否则得不到你想要的请求。阅读详情

在asyncData中检查获取到的数据，并在页面中使用条件语句来显示不同的内容。可以使用一个v-if语句，根据获取到的数据来显示不同的内容。

示例代码：

<template>
  <div>
    <div v-if="data.success">
      <!-- 显示成功页面 -->
      <h1>{{ data.message }}</h1>
    </div>
    <div v-else>
      <!-- 显示错误页面 -->
      <h1>{{ data.error }}</h1>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    try {
      const response = await $axios.get('/api/data')
      const data = response.data
      return {
        data
      }
    } catch (error) {
      return {
        data: {
          success: false,
          error: 'Failed to fetch data',
        },
      }
    }
  },
}
</script>

使用了asyncData来获取数据之后，检查获取到的数据并根据结果返回一个包含数据的对象。在页面中，可以使用v-if语句来根据数据的成功或失败状态来显示不同的内容。

收录于