useTitle

类别

Browser

导出大小

933 B

最近修改

2 days ago

反应式文档标题。

🌐 Reactive document title.

WARNING

此可组合项与 SSR 不兼容。

示例

源代码在线运行

Title

用法

🌐 Usage

import { useTitle } from '@vueuse/core'

const title = useTitle()
console.log(title.value) // print current title
title.value = 'Hello' // change current title

立即设置初始标题：

🌐 Set initial title immediately:

const title = useTitle('New Title')

传递一个 ref，当源引用更改时标题将被更新：

🌐 Pass a ref and the title will be updated when the source ref changes:

import { useTitle } from '@vueuse/core'
import { shallowRef } from 'vue'

const messages = shallowRef(0)

const title = computed(() => {
  return !messages.value ? 'No message' : `${messages.value} new messages`
})

useTitle(title) // document title will match with the ref "title"

传递一个可选的模板标签 Vue Meta Title Template 来更新将注入到此模板中的标题：

🌐 Pass an optional template tag Vue Meta Title Template to update the title to be injected into this template:

const title = useTitle('New Title', {
  titleTemplate: '%s | My Awesome Website'
})

WARNING

observe 与 titleTemplate 不兼容。