Nuxt 3 详情页偶发串台：我用动态 useAsyncData key 稳住路由切换

线上遇到一个很隐蔽的问题：从文章列表点进详情页，偶尔会显示上一篇的数据。刷新后又正常。第一反应是接口返回错了，但 Node.js 日志里 id 是对的。最后发现问题出在 Nuxt 3 的 useAsyncData：请求和缓存并不是天然跟着当前路由走，key 不变化，旧数据就会继续留在页面里。

先分清：接口旧数据还是前端缓存串台

我一开始怀疑 Node.js、MongoDB 或 Redis 缓存把旧详情吐出来了。排查后发现服务端收到的 id、查到的数据都没问题。真正的问题在前端：useAsyncData 会按 key 维护异步状态，如果详情页路由变了，但 key 没变，或者组件被复用，页面就可能继续读旧状态。

动态 key：让缓存跟着详情页身份走

const route = useRoute()
const postId = String(route.params.id)

const { data } = await useAsyncData(
  `post:${postId}`,
  () => $fetch(`/api/posts/${postId}`)
)

光有 key 还不够。如果从上一篇切到下一篇，详情页组件被复用，setup 不一定重跑。我会在路由参数变化时重置 data，或者让页面按参数重建；具体 API 行为以官方文档为准。

路由切换时的重置边界

• key 至少包含路由参数，必要时包含语言、版本等查询条件
• 同组件路由切换时，确认旧状态是否清空，避免旧正文闪一下
• 服务端渲染和客户端导航要看同一份数据源，别前端再私藏一层旧缓存
• 失败时不要保留旧详情，至少显示错误态，防止 SEO 抓到错误正文
• 如果用了页面级缓存或 keep-alive，先排除组件复用带来的副作用

“useAsyncData 的 key 不是随便起的名字，它决定这次异步数据属于哪个页面状态。”

修完后，详情页返回旧内容的问题没再复现。这个 BUG 也提醒我：Nuxt 的数据获取不是请求成功就结束，key、组件生命周期和路由切换共同决定用户看到什么。对内容站来说，稳定的正文还能减少 SEO 收录异常。