useTitle

useTitle 用来动态修改网页的标题

基础用法

<template>
   <div>Hello World! {{title}}</div>
</template>

<script setup lang="ts">

import { useTitle } from "hooks-vue3";

// 使用默认标题模板，直接将 "Vue App" 设置为页面标题
const title = useTitle("Vue App");

// 使用自定义标题模板，将 "Page Title" 添加到页面标题中
useTitle("Page Title", { template: "My Site | %s", isPrevOnUnmount: true });
</script>

API

const title = useTitle();

参数

export type UseTitleOptions = {
  template?: string | ((title: string) => string); //将默认的标题模板 %s 应用于指定的标题字符串
  isPrevOnUnmount?: boolean; //是否在组件卸载重置上一个的标题
};

function useTitle(newTitle?: string, options?: UseTitleOptions): Ref<string>