vue-i18n中的$t用法

vue-i18n中的$t用法

$t 是 vue-i18n 提供的全局方法

1、在 main.js 中引入 vue-i18n

  import Vue from 'vue';
  import VueI18n from 'vue-i18n';
  Vue.use(VueI18n); 通过插件的形式挂载

2、准备本地的翻译信息

const messages = {
  zh: {
    message: {
      hello:'好好学习，天天向上！'
    }
  },
  en: {
    message: {
      hello:'good good study, day day up!'
    }
  }
}

3、创建带有选项的 VueI18n 实例

const i18n = new VueI18n({
  locale:'en',// 语言标识
  messages
})

4、把 i18n 挂载到 vue 根实例上

const app =new Vue({
   router,
   i18n,
   ...App
}).$mount('#app')

5、html写入

<span>{{ $t('header.HeadMenu.logout') }}</span>   //使用$t方法实现国际化
<span v-text="$t('header.HeadMenu.logout')"></span>    //或者用v-text