Meta 标签
了解如何从 Nuxt 2 迁移到 Nuxt Bridge 新的 meta 标签。
如果您需要使用 head 访问组件状态，则应迁移到使用 useHead 。
如果您需要使用 Options API，在使用 defineNuxtComponent 时，可以使用 head() 方法。
迁移
设置 bridge.meta
import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
bridge: {
meta: true,
nitro: false // If migration to Nitro is complete, set to true
}
})
更新 head 属性
在您的 nuxt.config 中，将 head 重命名为 meta。（请注意，对象不再具有用于去重的 hid 键。）
export default {
head: {
titleTemplate: '%s - Nuxt',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Meta description' }
]
}
}
useHead 组合式函数
Nuxt Bridge 提供了一个新的 Nuxt 3 meta API，可以通过新的 useHead 组合式函数访问。
<script setup lang="ts">
useHead({
title: 'My Nuxt App',
})
</script>
我们建议不要同时使用原生的 Nuxt 2
head() 属性和 useHead ，因为它们可能会冲突。有关如何使用此组合式函数的更多信息，请参阅文档。
Options API
<script>
// if using options API `head` method you must use `defineNuxtComponent`
export default defineNuxtComponent({
head (nuxtApp) {
// `head` receives the nuxt app but cannot access the component instance
return {
meta: [{
name: 'description',
content: 'This is my page description.'
}]
}
}
})
</script>
可能的重大更改：
head 接收 nuxt 应用，但无法访问组件实例。如果您的 head 中的代码尝试通过 this 或 this.$data 访问 data 对象，则需要迁移到 useHead 组合式函数。标题模板
如果您想使用函数（为了完全控制），则无法在您的 nuxt.config 中设置它，建议在您的 /layouts 目录中设置它。
layouts/default.vue
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
</script>