Bagaimana untuk melaksanakan penukaran berbilang bahasa dalam Vue

Cara melaksanakan penukaran berbilang bahasa dalam Vue

Dengan perkembangan globalisasi, laman web berbilang bahasa telah menjadi keperluan yang semakin biasa. Dalam pembangunan Vue, cara melaksanakan penukaran berbilang bahasa merupakan isu penting. Artikel ini akan memperkenalkan kaedah untuk melaksanakan penukaran berbilang bahasa dalam Vue dan memberikan contoh kod khusus.

1 Persediaan
Sebelum mula melaksanakan penukaran berbilang bahasa, kita perlu menyediakan pakej bahasa yang diperlukan untuk berbilang bahasa. Pek bahasa ialah fail JSON yang mengandungi semua bahasa yang perlu disokong, dan setiap bahasa sepadan dengan fail JSON. Sebagai contoh, kami telah menyediakan dua pakej bahasa, bahasa Inggeris (en.json) dan Cina (zh.json), seperti berikut:

en.json:
{
" hello ": "Hello",
"world": "World",
"welcome": "Selamat datang ke laman web saya!"
}

zh.json ：
{
"hello": "Hello",
"world": "World",
"welcome": "Selamat datang ke laman web saya!"#🎜 🎜#}# 🎜🎜#
2 Buat komponen penukaran bahasa

Kami boleh mencipta komponen yang dipanggil LanguageSwitcher untuk melaksanakan penukaran bahasa. Komponen ini mengandungi menu lungsur turun untuk menukar bahasa. Dalam data komponen ini, kita boleh menetapkan bahasa semasa pembolehubah untuk merekodkan bahasa yang dipilih pada masa ini.

<select v-model="currentLanguage" @change="changeLanguage">
  <option value="en">English</option>
  <option value="zh">中文</option>
</select>

<🎜🎜#<🎜🎜#

eksport lalai {
data() {

return {
  currentLanguage: "en"
};

},
kaedah: {
rreee#🎜#🎜 🎜#};

3 Laksanakan logik penukaran bahasa

Dalam kaedah changeLanguage komponen LanguageSwitcher, kami boleh mengemas kini bahasa semasa mengikut pilihan yang dipilih bahasa, Dan import pakej bahasa yang sepadan ke dalam contoh Vue kami.

import en daripada "./languages/en.json";
import zh daripada "./languages/zh.json";

changeLanguage() {
if (this.currentLanguage === "en") {

changeLanguage() {
  // 在这里更新语言
}

} else if (this.currentLanguage === "zh") {

this.$root.$data.language = en;

}

}

Dalam contoh Vue kami, kami boleh menentukan bahasa pembolehubah untuk menyimpan pakej bahasa semasa.

Vue baharu({

data() {

this.$root.$data.language = zh;

}

}).$mount("#app");

4 Menggunakan berbilang bahasa
Setelah kami mengimport pakej bahasa ke dalam contoh Vue, kami boleh menggunakan berbilang bahasa di mana-mana sahaja dalam aplikasi. Pek bahasa semasa boleh diakses menggunakan $root.language.