元标记 Meta

发布于 2024-04-18 00:42:18 字数 3212 浏览 0 评论 0 收藏 0

Nuxt 3 提供了几种不同的方式来管理你的元标签。

通过你的nuxt.config。
通过 useHead 可组合
通过全局元组件

您可以自定义 title、titleTemplate、base、script、noscript、style、meta、link、htmlAttrs 和 bodyAttrs。

Nuxt 目前使用 vueuse/head 来管理您的元标记，但实现细节可能会发生变化。

阅读有关元标记的更多信息。

迁移

在你的 nuxt.config 中，将 head 重命名为 meta。考虑将此共享元配置移至您的 app.vue 中。（请注意，对象不再具有用于重复数据删除的“隐藏”键。）
如果您需要使用 head 访问组件状态，您应该迁移到使用 useHead。您也可以考虑使用内置的元组件。
如果需要使用Options API，在使用defineNuxtComponent时有一个head()方法可以使用。

Example: `useHead`

Nuxt 2

<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>

Nuxt 3

<script setup>
const title = ref('My App')
const description = ref('My App Description')

// 即使您更改上面的标题/描述，这也会有反应
useHead({
  title,
  meta: [{
    name: 'description',
    content: description
  }]
})
</script>

示例：内置元组件

Nuxt 3 还提供了可用于完成相同任务的元组件。虽然这些组件看起来类似于 HTML 标签，但它们由 Nuxt 提供并且具有相似的功能。

Nuxt 2

<script>
export default {
  head () {
    return {
      title: 'My App',
      meta: [{
        hid: 'description',
        name: 'description',
        content: 'My App Description'
      }]
    }
  }
}
</script>

Nuxt 3

<template>
  <div>
    <Head>
      <Title>My App</Title>
      <Meta name="description" content="My app description"/>
    </Head>
    <!-- -->
  </div>
</template>

确保对这些组件名称使用大写字母，以将它们与原生 HTML 元素区分开来（<Title> 而不是 <title>）。
您可以将这些组件放置在页面模板中的任何位置。

Example: Options API

Nuxt 3 (Options API)

<script>
// 如果使用选项 API `head` 方法，您必须使用 `defineNuxtComponent`
export default defineNuxtComponent({
  head (nuxtApp) {
    // `head` 接收到 nuxt 应用程序但无法访问组件实例
    return {
      meta: [{
        name: 'description',
        content: 'This is my page description.'
      }]
    }
  }
})
</script>

分享到QQ

分享到微博