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

【问题标题】：How can I translate app without reloading page in vue.js?如何在不重新加载 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。

标签： vue.js vuejs2 vue-component vuex vue-router

【解决方案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
    }
});

【讨论】：