Vue3动态页面切换时内容不重载问题求助

问题描述 #

基于单个动态页面配置、从Strapi拉取数据的Vue3（Nuxt）页面，本地运行正常，但线上部署后出现以下异常：

• 首次加载动态页面时内容正常显示
• 切换至其他同类型动态页面时，URL正常变化，但页面内容不更新
• 刷新页面后可加载对应页面的正确内容

问题原因 #

核心问题出在useAsyncData的缓存机制：

• 原代码使用固定缓存key "project"，当路由参数slug变化时，useAsyncData会复用之前缓存的数据，不会发起新请求
• Nuxt客户端导航时组件不会重新挂载，顶层的await useAsyncData仅执行一次

解决方案 #

方案1：动态生成缓存key + 手动监听路由变化 #

修改useAsyncData的缓存key为包含slug的动态值，确保不同页面缓存独立；同时监听slug变化触发数据刷新：

<template>
  <div v-if="!pending">
    {{ route.params.slug }}
    <div v-if="project.data[0]">
      <Head>
        <Title
          >{{ project.data[0].attributes.title }} / Tuomoas Markunpoika</Title
        >
      </Head>
      <div id="hero">
        <img
          :src="`${config.public.strapiURL}${project.data[0].attributes.preview.image.data.attributes.url}`"
        />
      </div>
      <ContentBlocks :blocks="project.data[0].attributes.content" />
      <h2 v-if="project.data[0].attributes.items.data.length" class="main-heading">
        Collection
      </h2>
      <ItemGrid v-if="project.data[0].attributes.items.data.length" :overview="`projects`" :selection="`${route.params.slug}`" />
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
const config = useRuntimeConfig()

// 用slug生成动态缓存key，每个页面单独缓存
const { data: project, pending, refresh } = await useAsyncData(
  `project-${route.params.slug}`,
  () => $fetch(
    `${config.public.strapiURL}/api/projects/?filters[slug][$eq]=${route.params.slug}&populate[meta][populate]=*&populate[preview][populate]=*&populate[content][populate]=*&populate[items]=*`
  )
)

// 监听slug变化，触发数据刷新
watch(() => route.params.slug, async () => {
  await refresh()
})

if (!project.value || Object.keys(project.value.data).length === 0) {
  throw createError({ statusCode: 404, statusMessage: "Page Not Found" })
}
</script>

方案2：利用useAsyncData的watch选项自动监听 #

更简洁的方式是通过useAsyncData的配置参数，指定监听route.params.slug，参数变化时自动重新发起请求：

const { data: project, pending } = await useAsyncData(
  `project-${route.params.slug}`,
  () => $fetch(
    `${config.public.strapiURL}/api/projects/?filters[slug][$eq]=${route.params.slug}&populate[meta][populate]=*&populate[preview][populate]=*&populate[content][populate]=*&populate[items]=*`
  ),
  {
    watch: [route.params.slug] // 自动监听slug变化，触发重新请求
  }
)

关键修改点说明 #

1. 动态缓存key：将固定key改为project-${route.params.slug}，避免不同页面的缓存互相覆盖
2. 路由参数监听：通过watch或useAsyncData的watch选项，在slug变化时触发数据重新获取，确保内容同步更新

内容的提问来源于stack exchange，提问作者Lisa