使用Nuxt的动态元头标题缓存问题

Question

我有一个可组合项，可以获取并存储全局变量：

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

const { randomEmoji } = await useRandomEmoji()

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

它工作得很好，但是，如果你：

1. 通过链接导航到其他页面；
2. 刷新页面；
3. 并通过浏览器的后退或前进按钮导航，标题将显示先前的值；
4. 如果您返回到请求实际值的页面，它将显示实际值。

浏览器似乎记住了每个页面的标题是什么。然而，在 html 检查模式下，标题在每个页面上显示实际值。

我尝试过的：

1. 检查了错过的状态更改，但没有；
2. 查找 useNuxtData 来记录缓存值以及 useAsyncData 的值，每次它们显示相同的同步值；
3. 更新路线更改时的标题（尽管这看起来不是一个好的做法），但它也不起作用。

您可以在这里重现它： https://nuxt-esr-emojis.pages.dev

源代码： https://github.com/frontendlegend/nuxt-esr-emojis

使用的浏览器：Google Chrome

如何使浏览器选项卡在每个页面上显示实际的标题，即使您在其他页面上重新加载并使用浏览器按钮导航也是如此？

Answer 1

出现此问题的原因是，在使用后退和前进按钮导航时，浏览器缓存了页面（包括其标题）。即使 Nuxt 在客户端正确更新

document.title

，浏览器选项卡可能并不总是立即反映它。

所以，只要添加一个简单的手表，就可以直接设置

document.title

。每当您的数据发生变化时，直接更新浏览器标题：

watch(() => randomEmoji.value, (newValue) => {
  document.title = `Nuxt ESR Emojis ${parseEmoji(newValue?.htmlCode)}`;
}, { immediate: true });

希望这有帮助！ 🌷