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

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

使用 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 标签。

例子：

{{ title }}

data () {

return {

title: 'Hello World!'

}

},

head () {

return {

title: this.title,

meta: [

{ hid: 'description', name: 'description', content: 'My custom description' }

]

}

}

}

为了避免子组件中的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" }

],

}

}

}

(责任编辑：admin)