如何在我的 vue-route 中使用 vue-i18n？

Question

我的主要app.js

        import Vue from 'vue'
        import language from './language'
        import VueI18n from 'vue-i18n'

        Vue.use(VueI18n)
        const i18n = new VueI18n({
          locale: 'en', 
          messages: language.messages,
        })

        import router from './router'
        new Vue({
          el: '#app',
          i18n,
          router,
          template: '<App/>',
          components: { App }  
        })

language.js

        export default { 
            messages : {
            en: {
                hello: 'hello!'
              },
              ja: {
                hello: 'こんにちは!'
              },
              zh: {
                hello: '你好!'
              }
            }
        }

我的问题是遵循 route.js 代码，我无法使用 this.$i18n.t('hello')，因为 $i18n 不可用。

        import Vue from 'vue'
        import Router from 'vue-router'

        export const myRouteMap = [

          {
            path: '/',
            component: MyComponent,
            redirect: '/myHome',
            //name: 'Home',
            name: this.$i18n.t('hello') // can't use $i18n here.
          }
        ]

有没有人有类似情况，想在vue-route使用i18n解决问题？

Answer 1

在您的示例中，this.i18n 不会被定义，因为它不是该文件上下文中的 Vue 实例。

您的根本问题是您试图将显示数据放入 route 的定义中。这通常是一种不好的做法，会导致您运行遇到的问题。

route的name属性应该是路由的唯一标识，定义后不能改变。

如果你想将 Vue 实例的属性基于路由的翻译名称（这对我来说仍然太紧密了）你可以在你指定的 Vue 组件中做到这一点路线.

computed: {
  title() {
    return this.$i18n.t(this.$route.name);
  }
}

不过，实际上，您不应该将显示数据基于 route 对象。似乎在相关属性:

的定义中指定要传递给 this.$i18n.t 的翻译消息密钥会更清楚，工作也更少

computed: {
  title() {
    return this.$i18n.t('hello');
  }
}

如何在我的 vue-route 中使用 vue-i18n？

How to use vue-i18n inside my vue-route?

vue.js

vue-router

vue-i18n