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属性route应该是路由的唯一标识符，定义后不应该改变。

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

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

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

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