Vue Router使用VueUse更改标签页名称的工具函数

进入正题

安装

npm i @vueuse/core
or
pnpm i @vueuse/core
or
yarn add @vueuse/core

router/helper.js

import { useTitle } from '@vueuse/core'

export const usePageTitle = (to) => {
  const projectTitle = import.meta.env.VITE_APP_TITLE  // 将可变名抽出到 .env 内配置
  const rawTitle = normalizeTitle(to.meta.title)
  const title = useTitle()
  title.value = rawTitle ? `${projectTitle} | ${rawTitle}` : projectTitle
  function normalizeTitle(raw) {
    return typeof raw === 'function' ? raw() : raw
  }
}

router/index.js

import { usePageTitle } from './helper'
routes: [
			{
	          path: 'xxx',
	          name: 'xxx',
	          meta: { // 配置title
	            title: 'xxx'
	          }
	        }
  		]


router.beforeEach((to, from, next) => {
  usePageTitle(to)
  // ...
  next()
})

到这里就结束了，后续还会更新 前端 系列相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！