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 专注文档头控制，职责清晰，无冗余。
