useHead
useHead 自定义 Nuxt 应用中各个页面的 head 属性。
useHead 组合函数允许您以编程和响应式的方式管理您的 head 标签,由 Unhead 提供支持。如果数据来自用户或其他不可信来源,我们建议您查看 useHeadSafe。
类型
useHead(meta: MaybeComputedRef<MetaObject>): void
以下是 useHead 的非响应式类型。
interface MetaObject {
title?: string
titleTemplate?: string | ((title?: string) => string)
base?: Base
link?: Link[]
meta?: Meta[]
style?: Style[]
script?: Script[]
noscript?: Noscript[]
htmlAttrs?: HtmlAttributes
bodyAttrs?: BodyAttributes
}
有关更详细的类型,请参见 @unhead/vue。
useHead 的属性可以是动态的,接受 ref、computed 和 reactive 属性。meta 参数也可以接受一个返回对象的函数,以使整个对象响应式。
参数
meta
类型: MetaObject
一个对象,接受以下 head 元数据:
meta: 数组中的每个元素映射到一个新创建的<meta>标签,其中对象属性映射到相应的属性。- 类型:
Array<Record<string, any>>
- 类型:
link: 数组中的每个元素映射到一个新创建的<link>标签,其中对象属性映射到相应的属性。- 类型:
Array<Record<string, any>>
- 类型:
style: 数组中的每个元素映射到一个新创建的<style>标签,其中对象属性映射到相应的属性。- 类型:
Array<Record<string, any>>
- 类型:
script: 数组中的每个元素映射到一个新创建的<script>标签,其中对象属性映射到相应的属性。- 类型:
Array<Record<string, any>>
- 类型:
noscript: 数组中的每个元素映射到一个新创建的<noscript>标签,其中对象属性映射到相应的属性。- 类型:
Array<Record<string, any>>
- 类型:
titleTemplate: 配置动态模板以自定义单个页面的标题。- 类型:
string|((title: string) => string)
- 类型:
title: 设置单个页面的静态标题。- 类型:
string
- 类型:
bodyAttrs: 设置<body>标签的属性。每个对象属性映射到相应的属性。- 类型:
Record<string, any>
- 类型:
htmlAttrs: 设置<html>标签的属性。每个对象属性映射到相应的属性。- 类型:
Record<string, any>
- 类型: