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

        在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语句来根据数据的成功或失败状态来显示不同的内容。