head 方法

Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head)html 属性

  • 类型: ObjectFunction

使用 head 方法设置当前页面的头部标签。

head 方法里可通过 this 关键字来获取组件的数据,你可以利用页面组件的数据来设置个性化的 meta 标签。

<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标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用 hid 键为meta标签配一个唯一的标识编号。请阅读关于 vue-meta 的更多信息

如何提交问题或文档贡献? 在 GitHub 编辑此页面!