进入正题

安装

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}` : projectTitlefunction normalizeTitle(raw) {return typeof raw === 'function' ? raw() : raw}
}

router/index.js

import { usePageTitle } from './helper'
routes: [{path: 'xxx',name: 'xxx',meta: { // 配置titletitle: 'xxx'}}]router.beforeEach((to, from, next) => {usePageTitle(to)// ...next()
})

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