如何在Nuxt 3中获取页面标题并在布局中复用？

你完全不需要重复写definePageMeta和useHead，只需要在布局层统一处理，页面只需要定义一次标题即可。

核心方案：布局层统一处理标题显示与页面头部设置 #

修改你的默认布局文件/layouts/default.vue，同时实现页面内标题渲染和浏览器头部标题设置：

<template>
  <div>
    <!-- 页面内展示的标题 -->
    <h1>{{ route.meta.title || '默认标题' }}</h1>
    <!-- 页面内容插槽 -->
    <slot />
  </div>
</template>

<script setup>
const route = useRoute()

// 自动同步浏览器头部标题
useTitle(() => route.meta.title || '我的Nuxt应用')
</script>

页面层只需定义一次标题 #

之后在任意页面（比如/pages/catalog.vue），只需要通过definePageMeta定义标题即可，无需额外写useHead：

<script setup>
definePageMeta({
  title: '商品目录页'
})
</script>

<template>
  <!-- 页面业务内容 -->
  <p>这里是商品目录的具体内容...</p>
</template>

进阶：统一添加标题后缀（可选） #

如果想给所有页面标题统一添加网站名称后缀，可以在app.config.ts中配置模板：

// app.config.ts
export default defineAppConfig({
  titleTemplate: '%s - 我的Nuxt商城'
})

然后修改布局中的标题逻辑，自动套用模板：

<script setup>
const route = useRoute()
const appConfig = useAppConfig()

useTitle(() => {
  const pageTitle = route.meta.title || '首页'
  return appConfig.titleTemplate.replace('%s', pageTitle)
})
</script>

这样页面标题会自动变成「商品目录页 - 我的Nuxt商城」，首页则显示「首页 - 我的Nuxt商城」，彻底避免重复代码，所有标题逻辑都在布局层统一维护。

内容的提问来源于stack exchange，提问作者David Eliauri