Comment utiliser vue-i18n dans ma vue route?

Question

1. Mes principaux 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. Les language.js

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

3. mon problème suit le code route.js, que je ne peux pas utiliser this.$i18n.t('hello'), parce que $i18n est indisponible.

    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. 
         } 
        ] 
   

Est-ce qu'il ya quelqu'un a une situation similaire, veulent utiliser i18n à vue route et résolu le problème?

Answer 1

Dans votre exemple this.i18n ne va pas à définir car il n'est pas une instance Vue dans le contexte de ce fichier.

Votre racine du problème est que vous essayez de mettre les données d'affichage dans la définition de l » route. Ceci est une mauvaise pratique en général et entraîne des problèmes comme celui que vous avez rencontré.

La propriété name du route doit être un identifiant unique de l'itinéraire et ne doit pas changer après avoir été défini.

Si vous voulez baser la propriété d'une occurrence de Vue sur le nom traduit de l'itinéraire (qui est encore un couplage trop serré à mon goût), vous pouvez le faire dans le composant Vue que vous avez spécifié pour l'itinéraire.

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

Vraiment, si, vous ne devriez pas baser vos données d'affichage sur l'objet route. On dirait que ce serait plus clair et moins de travail pour indiquer que la clé du message de traduction que vous voulez passer à this.$i18n.t dans la définition de cette propriété liée:

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