メインの製品ページに products/[slug] を含む products/index ページがあり、ページを変更して移動するための NuxtLink があります。 products/[slug] に移動し、その製品のデータを取得します。
最初のクリックでは正しいデータが得られますが、戻るをクリックするか、製品/インデックス ページをクリックして別の製品をクリックしようとすると、最初にクリックした製品と各製品の情報が表示されます。 , ここでも最初にクリックした商品の情報が表示されました。
console.log を使用すると、取得したデータ が変更されていないことがわかりました。 ここで何かが足りないでしょうか?
:key と :page-key を使用しても機能しません。
最初にクリックした商品
2 番目の製品はまだ変更されていません。データは最初の製品から取得されています
3 番目の写真はまだ変更されていません
productComponent.vue
products/index.vueページ
製品/[スラッグ]
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
解決策を見つけました useFetchにパラメータ
を追加する必要があります リーリーAPI はキャッシュし、別のリクエストを送信しないため、
initialCache : falseを使用します。 別のリクエストが送信されます この方法はメインの製品ではうまく機能しますが、products/[slug] または blog/[slug] ではこれを行う必要があると思います。より良い方法がある場合は、コメントを残してください