Nuxt 3 动态设置文章详情页标题（推荐 useHead 方法）
在开发博客或内容管理系统时，我们经常需要根据文章内容动态修改网页标题（<title>），以便：
- 提升 SEO 友好性
- 增强用户体验
- 支持刷新页面时依然显示正确标题
在 Nuxt 3 中，直接修改 route.meta.title 会报错，因为 currentRoute.value.meta 是只读的。官方推荐使用 useHead 来动态管理页面 <head>。
1️⃣ 问题示例
function applyArticleData(resp: Response<QueryArticleDetailRspVO>) {
const data = resp.data
article.title = data.title
// ❌ 这样会报错
const route = router.currentRoute.value
route.meta.title = article.title
document.title = article.title
}
报错原因：
meta在 Nuxt 3 中是只读的，不能直接赋值。
2️⃣ 推荐解决方案：useHead
安装和导入
Nuxt 3 内置 @vueuse/head，我们直接使用：
import { useHead } from '#app'
修改文章详情数据时动态设置标题
function applyArticleData(resp: Response<QueryArticleDetailRspVO>) {
const data = resp.data
article.title = data.title
article.content = data.content
article.updateTime = data.updateTime
article.categoryId = data.categoryId
article.categoryName = data.categoryName
article.readNum = data.readNum
article.tags = data.tags
article.preArticle = data.preArticle
article.nextArticle = data.nextArticle
// ✅ 使用 useHead 动态修改网页标题
useHead({
title: article.title
})
}
3️⃣ 优点
- 支持 SSR：Nuxt 3 会在服务端渲染正确的标题
- 刷新页面不丢失标题（结合 query 或状态管理可持久化）
- 替代直接修改 route.meta，避免只读报错
4️⃣ 可选扩展
如果想在刷新后也保留标题，可结合：
- URL query，例如
?title=文章标题 - Pinia / Vuex 状态管理
- localStorage / sessionStorage
然后在组件 onMounted 或路由守卫中读取并用 useHead 设置。
5️⃣ 总结
在 Nuxt 3 中动态设置文章详情页标题的最佳实践：
- 不要直接修改
route.meta，它是只读的 - 使用
useHead({ title: ... })修改网页标题 - 配合 query / 状态管理实现刷新持久化
这样不仅安全、规范，还支持 SEO 和 SSR。
