如何在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. 的language.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路由使用国际化，并解决了问题？

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'); 
    } 
}