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

责编:menVScode 2018-09-26 14:30 阅读(55)

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

类型: ObjectFunction

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


全局设置默认 Meta 标签

Nuxt.js 允许你在 nuxt.config.js 里定义应用所需的所有默认 meta 标签,在 head 字段里配置就可以了。

例子:

  head: {
    title: 'BIGSTUDENT',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' },
      {name:'renderer',content:'webkit'}
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }


局部(子组件)设置 Meta 标签

在 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标签配一个唯一的标识编号。

拿下面的例子来说,对于描述 meta 标签, 我们给 hid 属性设定一个唯一的标识值为:description, 当有组件定义了相同 hid 的 meta 标签时, vue-meta 将知道覆盖父级的配置。

在应用配置文件 nuxt.config.js 中配置默认 meta:

...head: {
    title: 'starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'keywords', content: 'keyword 1, keyword 2'},
      { hid: 'description', name: 'description', content: 'This is the generic description.'}
    ],
  },
...

在页面页面组件中利用 hid 来覆盖指定的 meta 配置:

export default {
  head () {
    return {
      title: `Page 1 (${this.name}-side)`,
      meta: [
        { hid: 'description', name: 'description', content: "Page 1 description" }
      ],
    }
  }
}
标签: nuxt vue-meta head
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码