내 vue-route에서 vue-i18n을 사용하는 방법은 무엇입니까? <code>$i18n</code>이기 때문에

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. 내 문제는 내가 this.$i18n.t('hello')를 사용할 수 없습니다 route.js 코드를 다음입니다 사용 불가.

    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의 속성은 고유 한 경로 식별자 여야하며 정의 된 후에 변경해서는 안됩니다.

Vue 인스턴스의 속성을 경로의 번역 된 이름 (내 취향에 맞지 않는 커플 링 인 경우)을 기반으로 만들려면 경로에 지정한 Vue 구성 요소에서 수행 할 수 있습니다.

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

정말,하지만 당신은 route 객체에 디스플레이 데이터를 기반으로해서는 안된다.

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