Nuxt动态Meta标题缓存问题：浏览器前进后退显示旧标题

我编写了一个组合式函数useRandomEmoji.ts，用于获取并存储全局变量：

// useRandomEmoji.ts

export default async function() {
  const { data, refresh, execute } = await useAsyncData(
    'randomEmoji', 
    () => $fetch("/api/emojis/random"),
    { immediate: false }
  )

  if (!data.value) execute()

  return { 
    randomEmoji: data, 
    refreshRandomEmoji: refresh 
  }
}

随后在app.vue中动态分配页面标题，期望值变化时仅在页面刷新时更新标题：

// app.vue

const { randomEmoji } = await useRandomEmoji()

watch(() => randomEmoji.value, () => {
  useHead({ 
    title: `Nuxt ESR Emojis ${parseEmoji(randomEmoji.value?.htmlCode)}` 
  })
})

当前功能正常，但存在以下问题：

• 通过链接跳转到其他页面
• 刷新该页面
• 使用浏览器前进/后退按钮导航时，页面标题显示旧值
• 返回请求实际值的页面时，标题显示正确值

看起来浏览器为每个页面保留了历史标题，但在HTML检查模式下，所有页面的标题均为实际值。

我已尝试以下方法但无效：

• 检查状态变更，未发现遗漏
• 对比useNuxtData缓存值与useAsyncData的值，二者始终同步一致
• 在路由变更时更新标题（虽非最佳实践）
• 直接设置document.title

使用浏览器：Google Chrome

这个问题核心是浏览器历史记录中的标题未被正确同步，Nuxt的useHead在客户端导航时可能未更新历史条目里的标题，可通过以下方式修复：

方法1：结合路由守卫同步标题到历史记录 #

在app.vue中，定义统一的标题更新函数，同时在初始加载、表情变化、路由导航完成时触发更新：

// app.vue
const { randomEmoji } = await useRandomEmoji()
const router = useRouter()

// 统一标题更新逻辑
const updateTitle = () => {
  const emojiContent = parseEmoji(randomEmoji.value?.htmlCode) || ''
  const newTitle = `Nuxt ESR Emojis ${emojiContent}`
  useHead({ title: newTitle })
  // 手动更新document.title确保历史记录同步
  document.title = newTitle
}

// 初始加载和表情变化时更新
watch(() => randomEmoji.value, updateTitle, { immediate: true })

// 路由导航完成后强制同步标题
router.afterEach(updateTitle)

方法2：使用useSeoMeta替代useHead（更推荐） #

useSeoMeta是Nuxt官方推荐的SEO元数据管理工具，响应式更新更可靠，配合路由钩子确保历史标题同步：

// app.vue
const { randomEmoji } = await useRandomEmoji()
const router = useRouter()

// 响应式生成标题
useSeoMeta(() => ({
  title: `Nuxt ESR Emojis ${parseEmoji(randomEmoji.value?.htmlCode) || ''}`
}))

// 路由导航后手动同步document.title
router.afterEach(() => {
  const emojiContent = parseEmoji(randomEmoji.value?.htmlCode) || ''
  document.title = `Nuxt ESR Emojis ${emojiContent}`
})

方法3：调整useAsyncData缓存策略 #

确保表情数据在路由切换时及时更新，修改useRandomEmoji.ts：

// useRandomEmoji.ts
export default async function() {
  const { data, refresh } = await useAsyncData(
    'randomEmoji', 
    () => $fetch("/api/emojis/random"),
    { immediate: true }
  )

  // 路由变更时刷新表情数据
  const router = useRouter()
  router.afterEach(() => refresh())

  return { 
    randomEmoji: data, 
    refreshRandomEmoji: refresh 
  }
}

然后在app.vue中用useSeoMeta响应式更新标题：

// app.vue
const { randomEmoji } = await useRandomEmoji()

useSeoMeta(() => ({
  title: `Nuxt ESR Emojis ${parseEmoji(randomEmoji.value?.htmlCode) || ''}`
}))

浏览器前进/后退依赖历史记录栈中每个条目保存的标题，Nuxt客户端导航默认可能未更新这些条目里的标题。通过在路由导航完成后手动触发标题更新，或使用更可靠的useSeoMeta，可确保每个历史条目存储正确标题，解决前进/后退时标题显示旧值的问题。

内容的提问来源于stack exchange，提问作者hlmn-div