Nuxt应用程序，页面在导航时不加载数据，但在刷新页面时加载数据

Question

我正在使用一些第三方 API 并尝试在页面上显示数据。我为此使用 Nuxt (3.13)。 Nuxt 文档看起来非常简单，但我无法让它正常工作。 我正在使用 NuxtLinks 从一个页面导航到另一页面。当页面包含 useFetch 函数时，我无法导航到它。网址发生了变化，当我使用网址刷新页面时，我想导航到一切正常。当然我想使用导航而不是刷新。这可能是路由器问题吗？或者服务器/客户端/生命周期问题？任何帮助将不胜感激。

应用程序.vue

<template>
  <main>
  <page-header />
  <NuxtPage />
</main>
</template>

组件/pageHeader.vue

<template>
  <header>
    <nav>
      <NuxtLink  
        to="/buy"
        aria-haspopup="menu"
        aria-expanded="false">
          Buy
        </NuxtLink>      
      <NuxtLink  
        to="/rent" 
        aria-haspopup="menu"
        aria-expanded="false">
          Rent
        </NuxtLink>        
     </nav>
  </header>
</template>

pages/buy/index.vue

<template>
  <section>
    <p>{{ homes.Objects.length }} koopwoningen</p>
    <div v-if="loading">Loading</div>    
    <div v-else-if="error">Sorry, er is iets fout gegaan</div>
    <div v-else-if="homes"
        v-for="home in homes.Objects" 
        :key="home.Adres" 
        
    >{{ home }}</div>>
  </section>
</template>

<script setup>
const {data: homes, loading, error} = useFetch(`https://partnerapi.funda.nl/feeds/Aanbod.svc/json/[key]/?type=koop`)
</script>

删除了顺风样式以提高可读性，并在上面的代码中用 [key] 替换了真正的键。

Answer 1

Nuxt 3 使用混合渲染，一开始可能有点难以理解，但 Nuxt Link 的幕后发生的事情是它创建了一个单页应用程序 (SPA)。当您单击

<NuxtLink/>

时，它会执行客户端路由，数据获取发生在服务器上，并将有效负载发送到客户端，这就是 Nuxt 提供像

useFetch

和

useAsyncData

这样的可组合项的原因。在您的代码中，问题是您没有等待 useFetch

<template>
  <section>
    <p>{{ homes.Objects.length }} koopwoningen</p>
    <div v-if="loading">Loading</div>    
    <div v-else-if="error">Sorry, er is iets fout gegaan</div>
    <div v-else-if="homes"
        v-for="home in homes.Objects" 
        :key="home.Adres" 
        
    >{{ home }}</div>>
  </section>
</template>

<script setup>
const {data: homes, loading, error} = await useFetch(`https://partnerapi.funda.nl/feeds/Aanbod.svc/json/[key]/?type=koop`)
</script>

如果您确实使用了await，那么这对于可选链接运算符来说将是一个很好的案例

<template>
  <section>
    <p>{{ homes?.Objects?.length }} koopwoningen</p>
    <div v-if="loading">Loading</div>    
    <div v-else-if="error">Sorry, er is iets fout gegaan</div>
    <div v-else-if="homes"
        v-for="home in homes?.Objects" 
        :key="home?.Adres" 
        
    >{{ home }}</div>>
  </section>
</template>

<script setup>
const {data: homes, loading, error} = useFetch(`https://partnerapi.funda.nl/feeds/Aanbod.svc/json/[key]/?type=koop`)
</script>