如何在不重新加载 vue.js 页面的情况下翻译应用程序？

Posted 2023-02-23

【中文标题】如何在不重新加载 vue.js 页面的情况下翻译应用程序？

【英文标题】：How can I translate app without reloading page in vue.js?

【发布时间】：2019-08-17 01:49:44

【问题描述】：

我想将我的应用英语翻译成德语。 关于语言更改事件，我写了这段代码

changeLocale (locale) 
      i18n.locale = locale.language
      VueCookies.set('UserLanguage', locale.language)
      // window.location.reload() this one is reloading page 
      this.$root.reload() // this one is not working 
    ,

我想在 vuejs 文件中翻译这些数据：

 DashboardData: ['name': this.$t('IVR'), 'name': this.$t('DTML'), 'name': this.$t('SSH')]

如果我执行 window.location.reload()，它会完美运行 但我不想重新加载页面所以，我正在考虑在 vue 中重新加载 root，我不确定。

有没有办法重新加载整个应用程序的根元素或所有属性？

【问题讨论】：

如果您尝试在 data 块中使用它，我认为 this.$t 是未定义的。您可以尝试改用 this.$i18n.t，或者将您的 DashboardData 移动到计算属性并继续使用 this.$t。

【参考方案1】：

如果您只是尝试通过 vue.js 执行安全重新加载，您可以使用一种简单的方法...

vm.$forceUpdate();

更多信息，您可以去here

【讨论】：

我试过这个，但在这种情况下不起作用。

实际上我想在 vue 中重新加载 root 的所有属性。

如果你只是想翻译一个页面...你可以试试this

是的，我只使用那个并且翻译工作（如果页面重新加载）但是当我将数据 vue 传递给 html 时，我需要重新加载页面进行翻译，但我不想重新加载页面

【参考方案2】：

为什么要重新加载？我正在使用 vue-i18n 并且我没有重新加载我的页面。代码如下：

home.vue

<v-list-tile @click="locale='fr'">
...
watch:
   locale(val) 
       this.$i18n.locale=val;
     
,
mounted: function() 
   this.locale = this.$i18n.locale;
,

我的 app.js

...
import VueI18n from 'vue-i18n';
import messages from './lang/messages'
import dateTimeFormats from './lang/dateTimeFormats'
import numberFormats from './lang/numberFormats'
...
Vue.use(VueI18n);
let locale = navigator.language;
const i18n = new VueI18n(
  fallbackLocale: 'gb',
  locale: locale,
  messages,
  dateTimeFormats,
  numberFormats
)
...
const app = new Vue(
    el: '#app',
    router,
    store,
    i18n,
    components:
        App
    
);