API head方法介绍

发布时间：2023-04-13 14:01:04 所属栏目：教程来源：

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

类型： Object 或 Function

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

在 head 方法里可通过 this 关键字来获取组件的数据，你可以利用页

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

类型： Object 或 Function

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!