hooks封装切换网页标题

在src下创建hooks文件夹，内部添加userTitle.js文件

//userTitle.js文件内部
import { ref, watch } from "vue";

export default function userInfo(titleValue) {
  const title = ref(titleValue);
  watch(
    title,
    (newValue, oldValue) => {
      document.title = newValue;
    },
    { immediate: true }
  );
  return {
    title,
  };
}

使用

//HTML
<template>
  <button @click="aaa">aaa</button>
  <button @click="bbb">bbb</button>
  <button @click="vvv">vvv</button>
</template>

//JS
<script setup >
import userInfo from "../hooks/userTitle";
//如果只是切换页面修改标题只用  userInfo("首页");
//下面是在一个页面内切换组件修改标题
const { title } = userInfo("首页");
function aaa() {
  title.value = "aaa";
}
function bbb() {
  title.value = "bbb";
}
function vvv() {
  title.value = "vvv";
}