如何在 Nuxt 3 中统一获取与复用页面标题

Nuxt 3 提供了 definePageMeta 声明式 API 设置页面元信息，配合 useRoute() 可在布局或组件中安全读取 route.meta.title，实现标题的集中定义与跨组件复用，无需重复设置。

nuxt 3 提供了 `definepagemeta` 声明式 api 设置页面元信息，配合 `useroute()` 可在布局或组件中安全读取 `route.meta.title`，实现标题的集中定义与跨组件复用，无需重复设置。

在 Nuxt 3 中，页面标题不应通过手动同步 useHead 和 route.meta 来维护，而应依托框架原生支持的元信息机制——definePageMeta。该 API 专为页面级元数据设计，会在构建时静态分析并注入到路由元信息中，确保 route.meta 在任意位置（如布局、导航栏、侧边栏）均可可靠访问。

✅ 正确做法：仅在页面组件中声明一次标题

<!-- pages/catalog.vue --><script setup>definePageMeta({  title: '商品目录'})</script><template>  <div>商品列表页内容...</div></template>

✅ 在布局中直接读取，无需额外逻辑

<!-- layouts/default.vue --><template>  <header>    <h1>{{ route.meta.title || '默认标题' }}</h1>  </header>  <main>    <slot />  </main></template><script setup>import { useRoute } from 'vue-router'const route = useRoute()</script>

⚠️ 注意事项：

• route.meta.title 是只读属性，由 definePageMeta 自动注入，不可在运行时修改；如需动态标题（如根据 API 数据），应在 useHead 中单独设置，并注意它不会影响 route.meta.title；
• definePageMeta 必须在 <script setup> 中顶层调用，不支持条件逻辑或异步操作；
• 若未设置 title，route.meta.title 为 undefined，建议提供兜底值（如 '首页' 或使用 || 运算符）；
• 所有页面级元字段（如 layout、middleware）均可通过 definePageMeta 统一管理，保持配置一致性。

? 进阶技巧：结合 useHead 实现 SEO 优化
虽然 route.meta.title 用于 UI 展示，但真正的 HTML <title> 标签仍需 useHead 控制。推荐写法如下，兼顾可读性与 SEO：

<script setup>definePageMeta({ title: '用户中心' })useHead({  title: '用户中心 - MyApp', // 更精准的 SEO 标题  meta: [    { name: 'description', content: '管理您的账户与偏好设置' }  ]})</script>

这样既复用了语义化标题，又保留了 SEO 灵活性——route.meta.title 专注 UI 渲染，useHead 专注文档头控制，职责清晰，无冗余。