元标签
管理你的元标签,从 Nuxt 2 到 Nuxt 3。
Nuxt 3 提供了几种管理元标签的不同方式:
你可以自定义 title
、titleTemplate
、base
、script
、noscript
、style
、meta
、link
、htmlAttrs
和 bodyAttrs
。
Nuxt 目前使用
Unhead
来管理你的元标签,但实现细节可能会改变。迁移
- 在你的
nuxt.config
中,将head
重命名为meta
。也可以考虑将这些共享的元配置移到你的app.vue
中。(注意对象不再有hid
键用于去重。) - 如果你需要通过
head
访问组件状态,应迁移使用useHead
,也可以考虑使用内置的元组件。 - 如果你需要使用 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>
<script setup lang="ts">
const title = ref('My App')
const description = ref('My App Description')
// 当你更改上述 title/description 时,这将是响应式的
useHead({
title,
meta: [{
name: 'description',
content: description
}]
})
</script>
元组件
Nuxt 3 还提供了可以用来完成同样任务的元组件。虽然这些组件看起来类似 HTML 标签,但它们由 Nuxt 提供,拥有类似的功能。
<script>
export default {
head () {
return {
title: 'My App',
meta: [{
hid: 'description',
name: 'description',
content: 'My App Description'
}]
}
}
}
</script>
<template>
<div>
<Head>
<Title>My App</Title>
<Meta name="description" content="My app description"/>
</Head>
<!-- -->
</div>
</template>
- 请确保你为这些组件名称使用大写字母,以区分它们与原生 HTML 元素(应使用
<Title>
而非<title>
)。 - 你可以将这些组件放置在页面模板中的任意位置。
Options API
Nuxt 3 (Options API)
<script>
// 如果使用 Options API 的 `head` 方法,必须使用 `defineNuxtComponent`
export default defineNuxtComponent({
head (nuxtApp) {
// `head` 接收 nuxt 应用实例,但无法访问组件实例
return {
meta: [{
name: 'description',
content: '这是我的页面描述。'
}]
}
}
})
</script>