Vue melaksanakan penukaran bahasa

Dalam pembangunan laman web berbilang bahasa, penukaran bahasa adalah fungsi yang sangat penting. Sebagai rangka kerja bahagian hadapan moden, Vue secara semula jadi boleh melaksanakan fungsi penukaran bahasa. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan penukaran bahasa.

1. Prinsip penukaran bahasa

Untuk melaksanakan penukaran bahasa di tapak web, kita perlu melakukan langkah berikut:

1. Buat fail sumber bahasa dan tukar teks dalam bahasa berbeza Simpan dalam fail berbeza;
2. Simpan jenis bahasa semasa dalam storan setempat
3. Dalam templat Vue, gunakan fail sumber bahasa yang sepadan untuk menggantikan teks asal.

2. Laksanakan penukaran bahasa

1. Buat fail sumber bahasa

Buat direktori lang dalam direktori /src untuk menyimpan fail sumber bahasa . Fail sumber bahasa boleh menjadi fail format JSON atau fail format JS. Dalam artikel ini, kami menggunakan fail format JSON.

Dalam direktori lang, buat fail zh-cn.json untuk menyimpan sumber teks bahasa Cina. Kandungannya adalah seperti berikut:

{
  "welcome": "欢迎使用Vue",
  "description": "这是一个演示Vue实现语言切换的例子",
  "button_text": "切换语言"
}

Kemudian buat fail en-us.json dalam direktori lang untuk menyimpan sumber teks bahasa Inggeris. Kandungannya adalah seperti berikut:

{
  "welcome": "Welcome to Vue",
  "description": "This is an example of implementing language switch with Vue",
  "button_text": "Switch Language"
}

2. Simpan jenis bahasa semasa

Dalam gedung Vuex, kita boleh menggunakan localStorage untuk menyimpan jenis bahasa semasa. Dalam fail store.js, tambahkan kod berikut:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    language: localStorage.getItem('language') || 'zh-cn', // 默认为中文
  },
  mutations: {
    // 切换语言类型
    switchLanguage(state, language) {
      state.language = language
      localStorage.setItem('language', language)
    },
  },
})

3. Ganti teks dalam templat

Dalam templat komponen Vue, kita boleh menggunakan $vuetify. lang. get fungsi untuk mendapatkan sumber teks yang sepadan. $vuetify.lang ialah objek yang disediakan oleh Vuetify untuk mendapatkan sumber teks. Dalam artikel ini, kami akan menggunakan Vuetify sebagai rangka kerja UI untuk Vue.

<template>
  <div>
    <h1>{{ $vuetify.lang.t('welcome') }}</h1>
    <p>{{ $vuetify.lang.t('description') }}</p>
    <v-btn @click="toggleLanguage()">{{ $vuetify.lang.t('button_text') }}</v-btn>
  </div>
</template>

4. Laksanakan fungsi untuk menukar bahasa

Dalam komponen Vue, kita perlu mentakrifkan fungsi untuk menukar bahasa. Dalam artikel ini, kami akan bertukar antara bahasa Cina dan Inggeris, yang boleh dikembangkan mengikut keperluan sebenar.

<script>
export default {
  methods: {
    // 切换语言
    toggleLanguage() {
      const language = this.$store.state.language === 'zh-cn' ? 'en-us' : 'zh-cn'
      this.$store.commit('switchLanguage', language)
      this.$vuetify.lang.current = language
    },
  },
}
</script>

Perlu diambil perhatian bahawa kita perlu menetapkan nilai $vuetify.lang.current kepada bahasa semasa untuk mendapatkan sumber teks yang sepadan kemudian.

3. Kod lengkap

<template>
  <div>
    <h1>{{ $vuetify.lang.t('welcome') }}</h1>
    <p>{{ $vuetify.lang.t('description') }}</p>
    <v-btn @click="toggleLanguage()">{{ $vuetify.lang.t('button_text') }}</v-btn>
  </div>
</template>

<script>
export default {
  methods: {
    // 切换语言
    toggleLanguage() {
      const language = this.$store.state.language === 'zh-cn' ? 'en-us' : 'zh-cn'
      this.$store.commit('switchLanguage', language)
      this.$vuetify.lang.current = language
    },
  },
}
</script>

4. Ringkasan

Dalam artikel ini, kami memperkenalkan kaedah menggunakan Vue untuk melaksanakan penukaran bahasa. Apabila melaksanakan penukaran bahasa, kita perlu mencipta fail sumber bahasa, menyimpan jenis bahasa semasa dan menggantikan teks dalam templat. Dalam fungsi yang melaksanakan penukaran bahasa, kita perlu menetapkan nilai $vuetify.lang.current kepada bahasa semasa supaya kita boleh mendapatkan sumber teks yang sepadan kemudian.

Atas ialah kandungan terperinci Vue melaksanakan penukaran bahasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!