Nuxt3：setup async asyncData

在Nuxt 3中，setup函数和asyncData方法可以一起使用，以便在服务端渲染(SSR)和客户端渲染(CSR)时都能获取异步数据。以下是一个简单列子，具体请根据自己项目实际修改 

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
 
const route = useRoute()
const title = ref('Nuxt 3 Async Data Example')
 
// 异步获取数据
const asyncData = async () => {
  const res = await fetch(`https://www.kingbal.com`)
  const data = await res.json()
  title.value = data.title
  return {
    message: `Loaded data `
  }
}
 
// 在组件被服务端渲染时调用
await asyncData()
</script>