Nuxt.js 如何配置 head？

推荐答案

在 Nuxt.js 中，可以通过在页面组件或布局组件中使用 head 方法来配置页面的 <head> 标签内容。以下是一个示例：

// www.javascriptcn.com code example
export default {
  head() {
    return {
      title: 'My Page Title',
      meta: [
        { hid: 'description', name: 'description', content: 'This is the page description' },
        { hid: 'og:title', property: 'og:title', content: 'My Page Title' },
        { hid: 'og:description', property: 'og:description', content: 'This is the page description' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  }
}

本题详细解读

1. head 方法的作用

head 方法是 Nuxt.js 提供的一个特殊方法，用于动态设置页面的 <head> 标签内容。它可以返回一个对象，该对象包含多个属性，如 title、meta、link 等，用于配置页面的标题、元数据和链接标签。

2. title 属性

title 属性用于设置页面的标题。它会生成一个 <title> 标签，并插入到页面的 <head> 中。

3. meta 属性

meta 属性用于设置页面的元数据。它是一个数组，每个元素都是一个对象，表示一个 <meta> 标签。hid 属性用于唯一标识每个 <meta> 标签，避免重复。

4. link 属性

link 属性用于设置页面的链接标签。它是一个数组，每个元素都是一个对象，表示一个 <link> 标签。常见的用途包括设置页面的 favicon。

5. 动态配置

head 方法可以根据组件的状态或路由参数动态生成 <head> 内容。例如，可以根据路由参数动态设置页面标题：

export default {
  head() {
    return {
      title: this.$route.params.id ? `Product ${this.$route.params.id}` : 'Default Title'
    }
  }
}

6. 全局配置

除了在页面组件中配置 head，还可以在 nuxt.config.js 中进行全局配置。例如：

// www.javascriptcn.com code example
export default {
  head: {
    title: 'Default Title',
    meta: [
      { hid: 'description', name: 'description', content: 'Default description' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }
}

全局配置会作为默认值，如果页面组件中没有覆盖这些配置，则会使用全局配置的值。

7. 注意事项

• hid 属性在 meta 标签中非常重要，它确保了相同 name 或 property 的 <meta> 标签不会重复。
• head 方法可以返回一个函数，以便在组件实例化时动态生成 <head> 内容。
• 在 nuxt.config.js 中配置的 head 会作为默认值，页面组件中的配置会覆盖全局配置。