Nuxt 3动态页面更改URL，但内容不变且仅获取数据一次

Question

我有一个 products/index 页面，主产品页面中有 products/[slug] 我有一个 NuxtLink 来更改页面并转到 products/[slug] 并获取数据对于该产品。

第一次点击时，我有正确的数据，但是当我点击后退或点击产品/索引页面然后尝试点击另一个产品时，我有我点击的第一个产品以及每个产品的信息，我再次获得了我点击的第一个产品的信息。

使用 console.log 让我发现我的获取数据没有改变，我在这里错过了什么吗？

在 上使用 :key 和 :page-key 不起作用。

我点击的第一个产品

第二个产品仍然没有变化，数据来自第一个产品

第三 张图片仍然没有变化

productComponent.vue

<template>
  <div class="mx-auto rounded border mb-7 border-blue-200 pt-1 px-2 mx-1 mb-2">
    <NuxtLink :to="link">
      <img
        class="rounded mx-auto mb-3 border-b border-y-blue-300 pb-3"
        :src="img"
        :alt="alt"
      />
      <div class="mt-2">
        <div>
          <div class="items-center font-bold text-slate-700 leading-snug">
            <p class="pr-3">{{ title }}</p>
          </div>
          <div class="mt-2 text-lg text-slate-600 pr-3 pb-2">
            قیمت : {{ price }} تومان
          </div>
        </div>
      </div>
    </NuxtLink>
  </div>
</template>

<script>
export default {
  name: 'ProductComponent',
  props: ['title', 'price', 'img', 'alt', 'link'],
}
</script>

products/index.vue页面

<script setup>
useHead({
  title: 'محصولات',
})
const {data, pending, refresh, error} = await useFetch('http://127.0.0.1:8000/api/products')
const products=data._value.data.data
</script>
<template>
  <div>
    <main  class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="relative z-10 flex items-baseline justify-between pt-24 pb-6 border-b mb-7 border-gray-200">
        <h1 class="text-4xl font-extrabold tracking-tight ">محصولات</h1>
      </div>
      <div class=" border border-blue-300 mx-auto p-4 mb-7">
        <div class="grid sm:grid-cols-2 md:grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-4">
          <div v-for="(product,index) in products" :key="index">
            <product-component :title="product.name"
                               :price="product.price"
                               :img="'http://127.0.0.1:8000/'+product.image[0].indexArray.large"
                               :alt="product.name"
                               :link="'/products/'+product.slug">
            </product-component>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

产品/[slug]

<script setup>
const route = useRoute();
const {data: productData, pending, refresh, error} = await useFetch(`http://127.0.0.1:8000/api/products/${route.params.slug}`)
const product = productData._value.data[0]
console.log(product)
</script>
<template>
  <div class="container mx-auto">
    <section class="grid grid-cols-12 gap-3 mb-7 ">
      <!--      little pic-->
      <div class="md:col-span-1 mx-auto md:flex md:flex-wrap hidden overflow-auto" style="max-height: 36rem">
        <div class="cursor-pointer bg-amber-100 max-h-9">
          <div class="max-h-fit mb-3 " v-for="(myImage , index) in product.image" :key="index"
               @click="switchImage('http://127.0.0.1:8000/'+myImage.indexArray.large)">
            <img class="object-fill " style="width: 80px;height: 60px"
                 :src="'http://127.0.0.1:8000/'+myImage.indexArray.large"
                 :alt="myImage.alt">
          </div>
        </div>
      </div>
      <!--      end of little pic-->
      <!--      pic-->
      <div v-if="image" class="md:col-span-6 col-span-12 w-100 w-full max-w-full">
        <img class=""
             :src="image"
             :alt="image.alt">
      </div>
      <div v-else class="md:col-span-6 col-span-12 ">
        <img class="object-fill"
             :src="'http://127.0.0.1:8000/'+product.image[0].indexArray.large"
             alt="">
      </div>
      <!--end of pic-->
      <div class="col-span-12 md:hidden">
        <div class="cursor-pointer overflow-x-scroll">
          <div class=" mb-3 inline py-1 " v-for="(myImage , index) in product.image" :key="index" @click="switchImage(index)">
            <img class="object-fill inline p-1 overflow-x-scroll" style="width: 80px;height: 60px"
                 :src="myImage.url"
                 :alt="myImage.alt">
          </div>
        </div>
      </div>
      <!--      details-->
      <div class="col-span-12 md:col-span-4">
        <div class="flex justify-between border-b border-amber-200 p-1 mb-4">
          <p> نام محصول :</p>
          <p>{{ product.name }}</p>
        </div>
        <div class="flex justify-between border-b border-amber-200 p-1 mb-4">
          <p> کشور :</p>
          <p>{{ product.country }}</p>
        </div>
        <div class="flex justify-between border-b border-amber-200 p-1 mb-4">
          <p> جنس :</p>
          <p>{{ product.material }}</p>
        </div>
        <div class="flex justify-between border-b border-amber-200 p-1 mb-4">
          <p> سن :</p>
          <p>{{ product.age }}</p>
        </div>
        <div class="flex justify-between border-b border-amber-200 p-1 mb-4">
          <p> رنگ :</p>
          <p>{{ product.color }}</p>
        </div>
        <div class="flex justify-between border-b border-amber-200 p-1 mb-4">
          <p> وزن :</p>
          <p>{{ product.weight }}</p>
        </div>
        <div class="flex justify-between border-b border-amber-200 p-1 mb-4">
          <p> طول :</p>
          <p>{{ product.length }}</p>
        </div>
        <div class="flex justify-between border-b border-amber-200 p-1 mb-4">
          <p> عرض :</p>
          <p>{{ product.width }}</p>
        </div>
        <div class="flex justify-between border-b border-amber-200 p-1 mb-4">
          <p> ارتفاع :</p>
          <p>{{ product.height }}</p>
        </div>
        <div class="flex justify-between border-b border-amber-200 p-1 mb-4">
          <p> قیمت :</p>
          <p>{{ product.price }}</p>
        </div>
      </div>
      <!--      end of details-->
    </section>

    <div class="p-3 mb-7" style="background-color:beige;">
      <ul class="flex flex-row md:space-x-6">
        <li class="block py-2 pr-4 pl-3 text-black">
          توضیحات
        </li>
      </ul>
    </div>
    <div class="mb-5 mx-auto whitespace-normal p-1 border-b border-amber-100-200 ">
      <div v-html="product.description"></div>
    </div>
    <div class="mb-7">
      <span class="block mb-4"> برچسب ها : </span>
      <a v-for="(tags , index) in product.tags.split(',')" :title="tags" :key="index"
         class="rounded-md text-sm" style="margin: 3px" rel="tag"
         href="">{{ tags }} / </a>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      image: null,
    }
  },
  methods: {
    switchImage(index) {
      this.image = index;
    },
  },
}
</script>

Answer 1

我找到了解决办法 我必须在 useFetch 中添加一个参数

const {data: productData, pending, refresh, error} = await useFetch(`http://127.0.0.1:8000/api/products/${slug}` , { initialCache: false })

因为 api 缓存并且不会发送另一个请求，所以使用 initialCache : false 它会发送另一个请求 这种方式对于主要产品很有用，但在产品/[slug]或博客/[slug]中我认为你必须这样做，如果你有更好的方法请给我评论