我在Nuxt3项目里设置了动态标题，但生成的HTML页面标题还是默认的”Welcome&#8221 […]

为什么Nuxt布局里的动态标题没在HTML里显示出来？

♫梓涵提问于 2026-02-09 13:30:27 阅读 36

框架

我在Nuxt3项目里设置了动态标题，但生成的HTML页面标题还是默认的”Welcome”，怎么回事？

布局文件是这样写的，想根据路由参数动态生成标题，但页面加载后标题始终没变化：


<template>
  <Html>
    <Head>
      <Title>{{ pageTitle }}</Title>
    </Head>
  </Html>
  <!-- 其他内容 -->
</template>

<script setup>
const { t } = useI18n()
const route = useRoute()
const pageTitle = computed(() => {
  return route.params.type ? <code>${t(&#039;pages.&#039; + route.params.type)}. ${t(&#039;common.titleSuffix&#039;)}</code> : 'Default Title'
})
</script>

之前试过直接写静态Test是可以生效的，但换成计算属性后就失效了。服务端渲染的时候这个动态数据应该能获取到吧？有没有哪里需要特别配置？

我来解答赞 7 收藏

反馈

2 条解答

宇文雅雯 Lv1

动态标题没显示出来是因为服务端渲染时 useRoute 的参数可能还没准备好。我之前这样搞的，把逻辑放到 onMounted 或者用 watch 监听路由变化。

试试这样改：

<script setup>

const { t } = useI18n()

const route = useRoute()

const pageTitle = ref('Default Title')



watch(() => route.params.type, (newType) => {

  if (newType) {

    pageTitle.value = ${t('pages.' + newType)}. ${t('common.titleSuffix')}

  } else {

    pageTitle.value = 'Default Title'

  }

}, { immediate: true })

</script>

记得在模板里也改成绑定 pageTitle.value。别忘了加 immediate: true，不然首次加载不会触发。

2026-02-19 20:08

♫俊涵 Lv1

你这个问题出在 useHead 的使用时机上。虽然你在布局文件里用了 <Html><Head>，但 Nuxt 3 推荐的做法是直接用 useHead 组合式函数来动态设置头部信息，尤其是在服务端渲染时，它能确保 HTML 在 SSR 阶段就正确注入。

<Title> 标签在模板中使用是有局限的，特别是当内容依赖响应式数据或路由变化时，SSR 渲染过程中可能拿不到最新的值，导致生成的 HTML 还是默认内容。

你应该把标题逻辑移到 useHead 里：

const { t } = useI18n()

const route = useRoute()



const pageTitle = computed(() => {

  return route.params.type

    ? ${t('pages.' + route.params.type)} ${t('common.titleSuffix')}

    : 'Default Title'

})



useHead({

  title: pageTitle

})

这样 Nuxt 会在服务端渲染时正确捕获 pageTitle 的值，并写入最终的 HTML。而且 useHead 是响应式的，客户端导航切换路由参数时也会自动更新标题。

另外确保你的 t() 函数在服务端可用，也就是 i18n 配置支持 SSR，如果没做额外处理可能会水合失败或者服务端翻译为空。可以用 ssr: true 配置你的 i18n 模块。

总之，别在模板里写动态 <Title>，改用 useHead 才是标准做法。

2026-02-09 14:01