vben
2021-08-24 56a966cfbf8db5b29a42185f0f25a0e800c30dbb
src/hooks/web/useTitle.ts
@@ -1,32 +1,33 @@
import type { Ref } from 'vue';
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 { ref, watch } from 'vue';
import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
import { isString } from '/@/utils/is';
import { REDIRECT_NAME } from '/@/router/constant';
export function useTitle(overrideTitle: string | null = null): Ref<string | null> {
  const title = ref<string | null>(isString(overrideTitle) ? overrideTitle : document.title);
  const observer = new MutationObserver((m) => {
    title.value = m[0].target.textContent;
  });
/**
 * Listening to page changes and dynamically changing site titles
 */
export function useTitle() {
  const { title } = useGlobSetting();
  const { t } = useI18n();
  const { currentRoute } = useRouter();
  const pageTitle = usePageTitle();
  watch(
    title,
    (t, o) => {
      if (isString(t) && t !== o) {
        document.title = t;
      }
    },
    {
      immediate: true,
      flush: 'sync',
    }
  );
    () => currentRoute.value.path,
    () => {
      const route = unref(currentRoute);
  const titleElement = document.querySelector('title')!;
  observer.observe(titleElement, { childList: true });
  tryOnUnmounted(() => {
    observer.disconnect();
  });
  return title;
      if (route.name === REDIRECT_NAME) {
        return;
      }
      const tTitle = t(route?.meta?.title as string);
      pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`;
    },
    { immediate: true },
  );
}