如何使用 useHead 在 Nuxt3 的标题中加载变量？答案

【问题标题】：How can I load a variable in head title in Nuxt3 using useHead?如何使用 useHead 在 Nuxt3 的标题中加载变量？
【发布时间】：2023-02-16 20:52:56
【问题描述】：

我想在 Nuxt3 的标题中加载一个变量。

有人可以解释它是如何工作的吗？

我尝试使用 useHead 和 useAsyncData。（jobData 是 useAsyncData 的一个变量，它是未定义的）

useHead({
    title: route.params.job.replace('-', ' '),
    // titleTemplate: "%s - test"
    meta: [
        { name: 'description', content: `${route.params.job.replace('-', ' ')} - Lorem ipsum` },
        { name: 'keywords', content: jobData.value.values.map(x => ` ${x}`) }
    ],
});

谢谢

【问题讨论】：

标签： vue.js nuxt.js nuxtjs3

【解决方案1】：

在您的页面中，您可以添加如下内容：

<script setup">
const var = 'some value'
definePageMeta({
  title: `Page Title - ${var}`,
})
</script>

见：https://v3.nuxtjs.org/api/utils/define-page-meta/

【讨论】：

【解决方案2】：

加载变量后调用 useHead() 可组合项。

例如。

async function loadValue() {
    const response = await useAsyncData("some-endpoint-")
    value = response.data
    useHead({
       title: `${value}`
    })
}

希望能帮助到你！

【讨论】：