动态修改标题

在做项目的时候我们通常需要做到实时的修改标题，比如当前我们在首页，那么希望浏览器的这个位置区域：

能够显示类似于 首页--xxx，当我们切换到登录页时，希望显示 登录--xxx，那么这种该如何实现呢，请看下面具体代码 这里由于需要在很多页面都用到，因此在这里我们考虑将其封装为一个公共的 hook ，这样在需要用到的页面只需要动态的将当前页面的标题传进去即可 具体代码如下：

src/hooks/usePageTitle.vue

import { onBeforeUnmount, onMounted, ref } from 'vue'

const NAME = 'TechBlog'

function usePageTitle(title) {
  const originationTitle = ref(document.title)

  // 更新网页标题
  const updatePageTitle = () => {
    document.title = title + '-' + NAME
  }

  // 在组件挂在时更新网页标题
  onMounted(() => {
    updatePageTitle()
  })

  //   在组件卸载时回复原始网页标题
  onBeforeUnmount(() => {
    document.title = originationTitle.value
  })

  return {
    updatePageTitle,
  }
}

// 导出
export default usePageTitle

在需要用到的页面引入即可： scr/views/Login.vue

<template>
  <div class="home">
    <p>登录页</p>
  </div>
</template>

<script setup>
import usePageTitle from '@/hooks/usePageTitle';

// 修改标题
usePageTitle('登录')
</script>

最终效果：