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

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

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

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

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

const appName: string = import.meta.env.VITE_APP_NAMEexport function setPageTitle(title: string) {if (typeof document !== 'undefined') {document.title = `${title} - ${appName}`}
}

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

# 设置名字
VITE_APP_NAME = "DevMentor"

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

二.封装为组件使用

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

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

使用:

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

三.在vue中的的路由设置

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

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

如果需要动态设置:

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

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