| | |
| | | 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 }, |
| | | ); |
| | | } |