同学录网站建设,美食网站设计模板,药品销售推广方案,wordpress 4.5 ueditor1.4.3.3一.采用工具来实现(setPageTitle.ts)多个页面中用更统一的方式设置 document.title#xff0c;可以封装一个工具函数:在utils目录下新建文件:setPageTitle.ts如果要在每个页面设置相同的网站标志可以使用下面的appNameconst appName: string import.meta.env.VITE_APP_NAMEex…一.采用工具来实现(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 langtsexport let title: stringconst appName: string import.meta.env.VITE_APP_NAMEconst fullTitle: string ${appName}-${title}
/scriptsvelte:headtitle{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
