初始版本提交

src/hooks/web/useTitle.ts

@@ -0,0 +1,37 @@
+import { watch, unref } from 'vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { useTitle as usePageTitle } from '@vueuse/core';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useRouter } from 'vue-router';
+import { useLocaleStore } from '/@/store/modules/locale';
+import { useAppStore } from '/@/store/modules/app';
+import { REDIRECT_NAME } from '/@/router/constant';
+
+/**
+ * Listening to page changes and dynamically changing site titles
+ */
+export function useTitle() {
+  const { title } = useGlobSetting();
+  const { t } = useI18n();
+  const { currentRoute } = useRouter();
+  const localeStore = useLocaleStore();
+  const appStore = useAppStore();
+  const pageTitle = usePageTitle();
+
+  watch(
+    [() => currentRoute.value.path, () => localeStore.getLocale],
+    () => {
+      const route = unref(currentRoute);
+
+      if (route.name === REDIRECT_NAME) {
+        return;
+      }
+
+      const tTitle = t(route?.meta?.title as string);
+      pageTitle.value = tTitle
+        ? ` ${tTitle} - ${appStore.getLogoConfig.shortName || title} `
+        : `${appStore.getLogoConfig.shortName || title}`;
+    },
+    { immediate: true },
+  );
+}