• head 方法

    head 方法

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

    • 类型： Object 或 Function使用 head 方法设置当前页面的头部标签。

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

    1. <template>
    2.   <h1>{{ title }}</h1>
    3. </template>
    5. <script>
    6. export default {
    7.   data () {
    8.     return {
    9.       title: 'Hello World!'
    10.     }
    11.   },
    12.   head () {
    13.     return {
    14.       title: this.title,
    15.       meta: [
    16.         { hid: 'description', name: 'description', content: 'My custom description' }
    17.       ]
    18.     }
    19.   }
    20. }
    21. </script>

    注意：为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号。请阅读关于 vue-meta 的更多信息。