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") } 
   } 
}

等等！ ：）

Answer 2

需要阅读详细的文档：）

为我工作。

    import {Meta} from '../meta.js'

    export default {
            name: 'pagecalc',
            metaInfo() {
                return {
                    title: this.metaInfo[0]['title'], // set a title
                    titleTemplate: this.metaInfo[0]['titleTemplate'], // %s  required
                    htmlAttrs: this.metaInfo[0]['htmlAttrs'],
                    meta: this.metaInfo[0]['meta']
                }
            }

            data() {
                return {
                    metaInfo: ""
                }
            },        
            watch: {
                language() {
                    this.metaInfo = Meta[this.$store.getters.languages]['Calculator']
                }
            },
            computed: {
                language() {
                    this.metaInfo = Meta[this.$store.getters.languages]['Calculator']
                    return this.$store.getters.languages
                }
            }
}