feat: 页面根据路由 title 设置标签名

src/router/index.ts

@@ -5,6 +5,8 @@ import {
 } from "vue-router";
 import routes from "./routes";
 import { useCachedViewStoreHook } from "@/store/modules/cachedView";
+import NProgress from "@/utils/progress";
+import setPageTitle from "@/utils/set-page-title";
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -19,9 +21,16 @@ export interface toRouteType extends RouteLocationNormalized {
 }
 
 router.beforeEach((to: toRouteType, from, next) => {
+  NProgress.start();
   // 路由缓存
   useCachedViewStoreHook().addCachedView(to);
+  // 页面 title
+  setPageTitle(to.meta.title);
   next();
 });
 
+router.afterEach(() => {
+  NProgress.done();
+});
+
 export default router;

src/settings.ts

@@ -0,0 +1,3 @@
+import pkg from "../package.json";
+
+export const pageDefaultTitle = pkg.name || "Vue3 H5 Template";

src/utils/set-page-title.ts

@@ -0,0 +1,7 @@
+import { pageDefaultTitle } from "@/settings";
+
+export default function setPageTitle(routerTitle?: string): void {
+  window.document.title = routerTitle
+    ? `${routerTitle} | ${pageDefaultTitle}`
+    : `${pageDefaultTitle}`;
+}