Nuxtjs 3 加载数据后导航

Question

我正在使用 Nuxtjs 3。我有页面 A 和页面 B。

页面 B 从 API 获取数据。

我希望从页面 A 导航到页面 B 时，页面 B 在从 API 获取数据后显示。

A页：

  <div>
    <NuxtLink to="B" />
  </div>

B页：

<div>
   content ...
<div>

...
methods: {
async fetchData() {

  let {data} = await useFetch(this.runTimeConfig.public.apiBase + '/website/fetch/index', {
        method: "GET",
        credentials: 'include',
        onResponseError(context) {
          alert("error")
          console.log(context.response._data)
        }
      }
  )
  this.pageConfig = data

},
}
...

我的问题是页面 B 显示，然后数据获取，但我想先获取数据，然后页面 B 渲染。

Answer 1

如果您使用 Nuxt3，我建议使用 Composition API (

script setup

)。
否则，您可以使用 Nuxt2 及其

asyncData

生命周期钩子，该钩子会阻塞渲染。