我在使用 nuxt3 时遇到以下问题。

• 动态页面[slug].vue正确加载初始slug的数据
• 当我离开页面并返回时，新数据不会加载，而是仍然显示旧数据。
• 如果我用旧数据刷新所述页面，它就可以正常工作。

发生这种情况似乎是因为从未进行过新 slug 的 api 调用。

我的 [slug.vue] 文件如下所示：

<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>

整个设置可以在 stackblitz 上看到：https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,pages%2Findex.vue