Nuxt 3 動的ページは URL を変更しますが、コンテンツは同じままで、データは 1 回だけフェッチされます

Question

メインの製品ページに products/[slug] を含む products/index ページがあり、ページを変更して移動するための NuxtLink があります。 products/[slug] に移動し、その製品のデータを取得します。

最初のクリックでは正しいデータが得られますが、戻るをクリックするか、製品/インデックス ページをクリックして別の製品をクリックしようとすると、最初にクリックした製品と各製品の情報が表示されます。 , ここでも最初にクリックした商品の情報が表示されました。

console.log を使用すると、取得したデータ が変更されていないことがわかりました。 ここで何かが足りないでしょうか?

で :key と :page-key を使用しても機能しません。

最初にクリックした商品

2 番目の製品はまだ変更されていません。データは最初の製品から取得されています

3 番目の写真はまだ変更されていません

productComponent.vue

リーリー

products/index.vueページ

リーリー

製品/[スラッグ]

リーリー

Answer 1

解決策を見つけました useFetchにパラメータ

を追加する必要があります リーリー

API はキャッシュし、別のリクエストを送信しないため、initialCache : false を使用します。 別のリクエストが送信されます この方法はメインの製品ではうまく機能しますが、products/[slug] または blog/[slug] ではこれを行う必要があると思います。より良い方法がある場合は、コメントを残してください