语言环境变更

通常，使用 Vue 根实例作为起点，使用 VueI18n 类的 locale 属性作为参考来本地化所有子组件。

有时你可能希望动态更改语言环境。在这种情况下，你可以更改 VueI18n 实例的 locale 属性的值。

  1. const i18n = new VueI18n({
  2.   locale: 'ja', // 设置语言环境
  3.   ...
  4. })
  6. // 创建 Vue 根实例
  7. new Vue({
  8.   i18n,
  9.   ...
  10. }).$mount('#app')
  12. // 更改为其它的 locale
  13. i18n.locale = 'en'

每个组件都包含一个引用为 $i18n 属性的 VueI18n 实例，该实例也可用于更改语言环境。

示例：

  1. <template>
  2.   <div class="locale-changer">
  3.     <select v-model="$i18n.locale">
  4.       <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
  5.     </select>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   name: 'locale-changer',
  12.   data () {
  13.     return { langs: ['ja', 'en'] }
  14.   }
  15. }
  16. </script>

警告

⚠️ 对于使用了 sync: false 的组件，语言环境的更改将被忽略。