Vue, i18n 和 vue-meta 如何整合？

Question

如何在更改网站语言时做到这一点，元页面也发生变化？

我用 vue-i18n - https://kazupon.github.io/vue-i18n/ vue-meta-https://www.npmjs.com/package/vue-meta.

App.vue

export default {
        name: 'Name',
        metaInfo: {
            title: 'Title', // set a title
            titleTemplate: '%s - title', // %s  required
            htmlAttrs: {
                lang: 'ru',
                amp: undefined // "amp" has no value
            },
            meta: [
                {   'name':'og:title',
                    'content': 'title',
                },
                {   'name':'metatitle',
                    'content': 'title',
                },
                {   'name':'og:description',
                    'content': 'Description',
                },
                {   'name':'description',
                    'content': 'Description',
                }

            ]

        },
        data(){return{ }},
        mounted() {}

Answer 1

不是将 metaInfo 定义为对象，而是将其定义为函数并像往常一样访问它。

export default { 
   metaInfo () { 
      return { title: this.$t("home.title") } 
   } 
}

Et 瞧！ :)

Answer 2

或者你可以使用

import i18n from '@/locales/i18n'
export default {
metaInfo() {
        return {
            meta: [
                {
                    name: 'title',
                    content: i18n.t('meta.title'),
                },
          ],
        }
    },
}

@/locales/i18n 是您的语言环境文件的路径，当您切换到另一种语言时，元标记将自动更改。我使用 vue-meta 2.4.0 和 vue2