vue-i18n国际化在data中切换不起作用

Posted listen9436

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-i18n国际化在data中切换不起作用相关的知识,希望对你有一定的参考价值。

vue-i18n是一个针对于vue的国际化插件,使用非常简单,具体使用方式看我细细道来。

实现方式

1. 下载包
npm install vue-i18n
2. 配置

在main.js文件中加入如下配置

// 引入插件和语言包
import VueI18n from vue-i18n
import zh from @/i18n/langs/zh
import en from @/i18n/langs/en
Vue.use(VueI18n)

//实例化vue-i18n
const i18n = new VueI18n({

  // 从本地存储中取,如果没有默认为中文,
  // 这样可以解决切换语言后,没记住选择的语言,刷新页面后还是默认的语言
  locale: localStorage.getItem(lang) || zh,
  
  messages: {
    zh: zh, // 中文语言包
    en: en // 英文语言包
  }
})

// 将i18n实例挂载到vue上
new Vue({
  el: #app,
  i18n,
  router,
  store,
  template: <App/>,
  components: { App }
})
3. 创建中、英文包文件
创建两个文件,一个为zh.js代表中文,en.js代表英文,具体内容格式如下
//zh.js
export default {
  nav: {
    home: 首页,
    monitor: 监控,
    analyze: 分析,
    alarm: 报警,
    maintenance: 运维,
    config: 配置,
    device: 设备,
    scada: 画面
  },
  confirm: {
    ok: 确认,
    cancel: 取消,
    content: 你确认要退出系统吗?,
    logout: 退 出
  },
}
//en.js
export default {
  nav: {
    home: Home, //首页
    monitor: Monitor, //监控
    analyze: Analyze, //分析
    alarm: Alarm, // 报警
    maintenance: Maintenance, //运维
    config: Config, //配置
    device: Device, //设备
    scada: Scada //画面
  },
  confirm: {
    ok: Logout, //退出
    cancel: Cancel, //取消
    content: Are you sure you want to quit the system?, //你确认要退出系统吗
    logout: Logout //
  }
}
4. 在组件中使用

我们先看vue-i18n的模板语法

//第一种
<span v-text="$t(‘nav.home‘)"></span>

//第二种
<span>{{$t(nav.home)}}</span>
5. 如何切换中英文

关于这点,vue-i18n给我们提供了一个全局变量locale,通过他我们可以查看当前使用的语言,也可以通过他改变当前使用的语言;

具体用法:

// 查看当前使用的语言
console.log(this.$i18n.locale)

// 改变当前使用的语言
this.$i18n.locale = en  // 将当前使用的语言切换到英文

一般在项目中,我们会使用如下方式切换语言

// 切换语言按钮
<v-list-tile  @click="onChangeLang">
  <v-list-tile-title>中文 / EN</v-list-tile-title>
</v-list-tile>
<v-list-tile  @click="onLogOutClick">
  <v-list-tile-title >{{$t(confirm.logout)}}</v-list-tile-title>
</v-list-tile>


// 切换方法onChangeLang的处理, 这里的弹出框是element-ui的组件
onChangeLang() {
  this.$confirm(this.$t(changeLang.content), this.$t(changeLang.tip), {
    confirmButtonText: this.$t(changeLang.ok),
    cancelButtonText: this.$t(confirm.cancel),
    type: warning
  })
    .then(() => {
      let lang = this.$i18n.locale
      if (lang === zh) {
        this.$i18n.locale = en
        // 对应main.js配置文件中的localStorage的get方法
        localStorage.setItem(lang, this.lang)
      } else {
        this.$i18n.locale = zh
        localStorage.setItem(lang, this.lang)
      }
    })
    .catch(() => {})
}

可能会遇到的问题

1. 记不住切换后的语言

就是我们切换语言后,刷新又是默认语言,这点我们在上面已经用本地存储localStorage解决了;

2. 将this.$t() 写到了data属性里,切换语言不起作用

官方的解决办法是,建议我们将表达式写到computed属性里,不要写到data







作者:LeonWuV 来源:CSDN 原文:https://blog.csdn.net/wxl1555/article/details/85112530 版权声明:本文为博主原创文章,转载请附上博文链接!

以上是关于vue-i18n国际化在data中切换不起作用的主要内容,如果未能解决你的问题,请参考以下文章

vue-i18n实现vue对语言切换,国际化。

vue-i18n国际化实例

vue中使用vue-i18n 一个简单的国际化操作

vue-i18n 怎么用在data属性上

vue-i18n 的用法

Vee-validate 和 Vue-I18n 本地化不起作用