Saya menghadapi masalah berikut semasa menggunakan nuxt3.
[slug].vueMemuatkan data slug awal dengan betulIni nampaknya berlaku kerana panggilan api kepada slug baru tidak pernah dibuat.
Fail [slug.vue] saya kelihatan seperti ini:
<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>
Seluruh persediaan boleh dilihat pada stackblitz: https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,pages%2Findex.vue
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Secara lalai, useFetch, useLazyFetch, useAsyncData dan useLazyAsyncData kesemuanya cache muatan respons awal yang mula-mula diambil dalam sesi penyemak imbas semasa, jadi tiada permintaan berikutnya yang tidak berguna dibuat. (Sekurang-kurangnya, saya rasa itulah idea di sebaliknya)
Anda boleh menukar gelagat lalai setiap kompos yang diambil dengan menghantar pilihan "initialCache" dan menetapkannya kepada "false".
Lihat: https://v3.nuxtjs.org/api /composables/use-async-data#params
Ikuti nasihat dalam ulasan di atas dan semak dokumentasi di sini: https://v3.nuxtjs.org/guide/features/data-fetching/#refreshing-dataSaya mencuba kod berikut yang berkesan
const { data: article, refresh } = await useFetch( `https://swapi.dev/api/people/${slug.value}` ); watchEffect(() => { refresh(); });Contoh berfungsi di sini: https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,app.vue