如何在Nuxt3中使用useHead在页面标题中加载变量？

问题根源 #

useAsyncData 是异步执行的，初始状态下 jobData.value 为 undefined，直接在 useHead 的静态配置中访问会触发报错；同时静态配置不会自动响应异步数据的变更，数据返回后也无法更新头部信息。

正确实现方案 #

1. 先通过 useAsyncData 正确获取异步数据

const route = useRoute()
// 替换为你的实际请求逻辑，比如接口调用
const { data: jobData } = useAsyncData('job-detail', () => {
  return $fetch(`/api/jobs/${route.params.job}`)
})

2. 用响应式方式配置 useHead

推荐使用函数式 useHead，它会自动追踪依赖变化，当异步数据返回后自动更新头部信息，同时添加可选链处理避免初始 undefined 报错：

useHead(() => ({
  title: route.params.job.replace('-', ' '),
  meta: [
    { 
      name: 'description', 
      content: `${route.params.job.replace('-', ' ')} - Lorem ipsum` 
    },
    { 
      name: 'keywords', 
      content: jobData.value?.values?.map(item => item.trim()).join(', ') || '' 
    }
  ]
}))

也可以用 computed 单独处理需要异步数据的字段：

const keywordsContent = computed(() => {
  return jobData.value?.values?.map(item => item.trim()).join(', ') || ''
})

useHead({
  title: route.params.job.replace('-', ' '),
  meta: [
    { 
      name: 'description', 
      content: `${route.params.job.replace('-', ' ')} - Lorem ipsum` 
    },
    { 
      name: 'keywords', 
      content: keywordsContent 
    }
  ]
})

注意事项 #

• 确保 useAsyncData 返回的数据结构符合预期（比如包含 values 数组）
• 可选链 ?. 和默认值 || '' 是为了避免数据未加载完成时触发报错

内容的提问来源于stack exchange，提问作者Andrei Ilie