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

Question

1. 我的主要 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 }  
           })
   

2. 语言.js

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

3. 我的问题是遵循 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 属性应该是路由的唯一标识符，并且在定义后不应更改。

如果你想将 Vue 实例的属性基于路由的翻译名称(这对我来说仍然太紧密了)，你可以在为路由指定的 Vue 组件中执行此操作。

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

不过，实际上，您不应该将显示数据基于 route 对象。似乎在相关属性的定义中指定要传递给 this.$i18n.t 的翻译消息 key 会更清晰，工作也更少:

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