一.采用工具來實現(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
