useHead

源文件
useHead 可自定义 Nuxt 应用程序各个页面的头部属性。

useHead 可组合函数允许你以编程和响应式方式管理你的 head 标签，其强大功能由以下提供：Unhead。如果数据来自用户或其他不受信任的来源，我们建议你查阅 useHeadSafe。

在文档 > 4 X > 入门 > Seo Meta中阅读更多内容。

类型

签名
export function 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

一个接受以下头部元数据的对象

  • 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>