Bei der Verwendung von nuxt3 ist das folgende Problem aufgetreten.
[slug].vueLadet die Daten des ersten Slugs korrektDies scheint zu passieren, weil der API-Aufruf an den neuen Slug nie erfolgt.
Meine [slug.vue] Datei sieht so aus:
<script setup lang="ts">
import { ref } from 'vue';
const route = useRoute();
const slug = ref(String(route.params.slug));
console.log(slug.value);
const apicall = `https://swapi.dev/api/people/${slug.value}`;
const { data: article } = await useFetch(
`https://swapi.dev/api/people/${slug.value}`
);
</script>
<template>
<div>
<NuxtLink to="/">Back to Home</NuxtLink>
<pre>
{{ `https://swapi.dev/api/people/${slug}` }}
{{ route.params.slug }}
{{ article }}
</pre>
</div>
</template>
Das gesamte Setup kann auf Stackblitz eingesehen werden: https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,pages%2Findex.vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
默认情况下，useFetch、useLazyFetch、useAsyncData 和 useLazyAsyncData 都会缓存当前浏览器会话中初始获取的初始响应负载，因此不会发出无用的后续请求。 （至少，我猜这就是背后的想法）
您可以通过传递选项“initialCache”并将其设置为“false”来更改每个提取可组合项的默认行为。
参见：https://v3.nuxtjs.org/api /composables/use-async-data#params
按照上面评论中的建议，并在此处检查文档：https://v3.nuxtjs.org/guide/features/data-fetching/#refreshing-data我尝试了以下有效的代码
const { data: article, refresh } = await useFetch( `https://swapi.dev/api/people/${slug.value}` ); watchEffect(() => { refresh(); });此处的工作示例：https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,app.vue