Nuxt.js head 方法

head 方法

Nuxt.js 使用了 vue-meta 更新應(yīng)用的 頭部標(biāo)簽(Head) 和 html 屬性。

• 類型： Object 或 Function

使用 head 方法設(shè)置當(dāng)前頁面的頭部標(biāo)簽。

在 head 方法里可通過 this 關(guān)鍵字來獲取組件的數(shù)據(jù)，你可以利用頁面組件的數(shù)據(jù)來設(shè)置個性化的 meta 標(biāo)簽。

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello World!'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
}
</script>

注意：為了避免子組件中的meta標(biāo)簽不能正確覆蓋父組件中相同的標(biāo)簽而產(chǎn)生重復(fù)的現(xiàn)象，建議利用 hid 鍵為meta標(biāo)簽配一個唯一的標(biāo)識編號。