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的定义中。这通常是不好的做法，会导致您遇到的问题。

name的{{1}}属性应该是路由的唯一标识符，在定义后不应更改。

如果你想将Vue实例的属性基于路由的翻译名称（根据我的口味仍然过于紧密），你可以在你为路径指定的Vue组件中做到这一点。

route

但实际上，您不应将显示数据基于computed: { title() { return this.$i18n.t(this.$route.name); } }对象。看起来只是在相关属性的定义中指定要传递给route的翻译消息密钥更清晰，更少工作：

this.$i18n.t

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

1 个答案: