Meta 标签
管理你的 meta 标签，从 Nuxt 2 到 Nuxt 3。
Nuxt 3 提供了几种不同的方法来管理你的 meta 标签
- 通过你的
nuxt.config。 - 通过
useHead组合式函数 - 通过全局 meta 组件
你可以自定义 title、titleTemplate、base、script、noscript、style、meta、link、htmlAttrs 和 bodyAttrs。
Nuxt 当前使用
vueuse/head 来管理你的 meta 标签，但实现细节可能会改变。迁移
- 在你的
nuxt.config中，将head重命名为meta。考虑将此共享 meta 配置移动到你的app.vue中。（请注意，对象不再具有用于去重的hid键。） - 如果需要使用
head访问组件状态，则应迁移到使用useHead。你也可以考虑使用内置的 meta 组件。 - 如果你需要使用 Options API，则在使用
defineNuxtComponent时可以使用head()方法。
useHead
<script>
export default {
data: () => ({
title: 'My App',
description: 'My App Description'
})
head () {
return {
title: this.title,
meta: [{
hid: 'description',
name: 'description',
content: this.description
}]
}
}
}
</script>
Meta 组件
Nuxt 3 还提供了 meta 组件，你可以使用它们来完成相同的任务。虽然这些组件看起来类似于 HTML 标签，但它们是由 Nuxt 提供的，并且具有类似的功能。
<script>
export default {
head () {
return {
title: 'My App',
meta: [{
hid: 'description',
name: 'description',
content: 'My App Description'
}]
}
}
}
</script>
- 请确保对这些组件名称使用大写字母，以便将它们与原生 HTML 元素区分开来（使用
<Title>而不是<title>）。 - 你可以将这些组件放置在页面模板中的任何位置。
Options API
Nuxt 3 (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>