封装---统一封装处理页面标题

寻觅~流光2025-07-14 17:44

一.采用工具来实现(setPageTitle.ts)

多个页面中用更统一的方式设置 document.title，可以封装一个工具函数:

在utils目录下新建文件:setPageTitle.ts

如果要在每个页面设置相同的网站标志可以使用下面的appName

TypeScript 复制代码

const appName: string = import.meta.env.VITE_APP_NAME

export function setPageTitle(title: string) {
  if (typeof document !== 'undefined') {
    document.title = `${title} - ${appName}`
  }
}

其中的appName定义在.nev文件中:.nev

TypeScript 复制代码

# 设置名字
VITE_APP_NAME = "DevMentor"

使用时直接导入这个工具使用

二.封装为组件使用

我这里采用svelte框架示例,其他vue,react大差不差

TypeScript 复制代码

<script lang="ts">
  export let title: string
  const appName: string = import.meta.env.VITE_APP_NAME
  const fullTitle: string = `${appName}-${title}`
</script>

<svelte:head>
  <title>{fullTitle}</title>
</svelte:head>

使用:

TypeScript 复制代码

<PageTitle title="用户管理" />

三.在vue中的的路由设置

如果你使用 Vue Router（通常用于多页 SPA），可以这样统一控制标题。

TypeScript 复制代码

{
  path: '/paper/edit',
  name: 'EditPaper',
  component: () => import('@/views/Paper/Edit.vue'),
  meta: {
    title: '编辑试卷'
  }
}

如果需要动态设置:

TypeScript 复制代码

router.beforeEach((to, from, next) => {
  const title = to.meta?.title
  if (title) {
    document.title = `MyAdmin - ${title}`; // 可加前缀
  }
  next();
});

上面两个代码在一个文件中;router/index.ts