perf: adjust the logic of

src/router/guard/index.ts

@@ -2,14 +2,14 @@ import type { Router } from 'vue-router';
 
 import { Modal, notification } from 'ant-design-vue';
 import { AxiosCanceler } from '/@/utils/http/axios/axiosCancel';
-import { createPageTitleGuard } from './pageTitleGuard';
 import { createProgressGuard } from './progressGuard';
 import { createPermissionGuard } from './permissionGuard';
 import { createPageLoadingGuard } from './pageLoadingGuard';
 import { useSetting } from '/@/hooks/core/useSetting';
 import { getIsOpenTab, setCurrentTo } from '/@/utils/helper/routeHelper';
+import { setTitle } from '/@/utils/browser';
 
-const { projectSetting } = useSetting();
+const { projectSetting, globSetting } = useSetting();
 export function createGuard(router: Router) {
   const { openNProgress, closeMessageOnSwitch, removeAllHttpPending } = projectSetting;
   let axiosCanceler: AxiosCanceler | null;
@@ -33,8 +33,16 @@ export function createGuard(router: Router) {
     setCurrentTo(to);
     return true;
   });
+
+  router.afterEach((to) => {
+    // change html title
+
+    setTimeout(() => {
+      setTitle(to.meta.title, globSetting.title);
+    }, 0);
+  });
+
   openNProgress && createProgressGuard(router);
   createPermissionGuard(router);
-  createPageTitleGuard(router);
   createPageLoadingGuard(router);
 }

src/router/guard/pageTitleGuard.ts

@@ -1,39 +0,0 @@
-import type { Router } from 'vue-router';
-
-import { useSetting } from '/@/hooks/core/useSetting';
-
-/**
- * 设置页面标题
- * @param {*} title  :页面标题
- */
-const setDocumentTitle = (title: string) => {
-  document.title = title;
-  const ua = navigator.userAgent;
-  const regex = /\bMicroMessenger\/([\d.]+)/;
-  // 兼容
-  if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
-    const i = document.createElement('iframe');
-    i.src = '/favicon.ico';
-    i.style.display = 'none';
-    i.onload = function () {
-      setTimeout(function () {
-        i.remove();
-      }, 9);
-    };
-    document.body.appendChild(i);
-  }
-};
-export const createPageTitleGuard = (router: Router) => {
-  router.beforeEach(async (to) => {
-    // This operation does not require synchronization
-    setTimeout(() => {
-      const { globSetting } = useSetting();
-      if (to.meta.title) {
-        const { title } = globSetting;
-        const _title = to.meta.title ? ` ${to.meta.title}-${title} ` : `${title}`;
-        setDocumentTitle(_title);
-      }
-    }, 30);
-    return true;
-  });
-};

src/utils/browser.ts

@@ -70,3 +70,32 @@ export function isFirefoxFn() {
 export function isOperaFn() {
   return type === 'Opera';
 }
+
+/**
+ * set page Title
+ * @param {*} title  :page Title
+ */
+const setDocumentTitle = (title: string) => {
+  document.title = title;
+  const ua = navigator.userAgent;
+  const regex = /\bMicroMessenger\/([\d.]+)/;
+  // 兼容
+  if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
+    const i = document.createElement('iframe');
+    i.src = '/favicon.ico';
+    i.style.display = 'none';
+    i.onload = function () {
+      setTimeout(function () {
+        i.remove();
+      }, 9);
+    };
+    document.body.appendChild(i);
+  }
+};
+
+export function setTitle(title: string, appTitle?: string) {
+  if (title) {
+    const _title = title ? ` ${title}-${appTitle} ` : `${appTitle}`;
+    setDocumentTitle(_title);
+  }
+}

src/views/demo/feat/tab-params/index.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="p-4"> Current Param : {{ params }} </div>
+  <div class="p-4">
+    Current Param : {{ params }}
+    <input />
+  </div>
 </template>
 <script lang="ts">
   import { computed, defineComponent, unref } from 'vue';
   import { useRouter } from 'vue-router';
   export default defineComponent({
+    name: 'TestTab',
     setup() {
       const { currentRoute } = useRouter();
       return {