如何在vue路由内使用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-route上使用i18n并解决问题？

Answer 1

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

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

的name属性route应该是路由的唯一标识符，并且在定义后不应更改。

如果要基于路由的翻译名称（对于我来说仍然太紧密），将Vue实例的属性作为基础，则可以在为路由指定的Vue组件中执行此操作。

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

但是，实际上，您不应将显示数据基于该route对象。似乎只需要this.$i18n.t在相关属性的定义中指定要传递的翻译消息关键字，就会更清楚，更省力：

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