尝试使用 Quasar、meta 和 vue-i18n 更改页面标题

Question

我正在使用 Quasar v2，使用 Vue Composition API 和 vue-i18n，我希望网站标题在活动语言更改时更改显示（通过下拉菜单），但无论我尝试什么都不会导致标题语言被改变。有任何想法吗？

以下是我现在所拥有的（只是必需品）：

import { defineComponent, ref, computed } from 'vue';
import { useMeta } from 'quasar';

export default defineComponent({
  setup () {
    const { t: translate } = useI18n() as any;

    const siteTitle = computed(() => translate('title.app') as string);

    const pageMetadata = {
      title: 'untitled',
      titleTemplate: (title: string) => `${title} - ${siteTitle.value}`
    };
    useMeta(pageMetadata);
  }
});

我用来切换语言的代码：

async onChangeLanguage () {
  try {
    let locale = this.language;
    if (this.language === 'en') {
      locale = 'en-GB';
    }

    this.$i18n.locale = locale;

    const quasarLang = await import(`quasar/lang/${locale}`);
    if (quasarLang) {
      Quasar.lang.set(quasarLang.default);
    }
  } catch (error) {
    this.$log.error(error);
  }
}

Answer 1

根据文档，如果您向 useMeta 传递一个简单的对象，则它不会做出反应。相反，您应该传递一个返回所需值的函数：

export default defineComponent({
  setup () {
    const { t: translate } = useI18n() as any;

    const siteTitle = computed(() => translate('title.app') as string);

    useMeta(() => {
       const title = 'untitled';
       const titleTemplate = `${title} - ${siteTitle.value}`
       return { title, titleTemplate }
    });
});