Comment implémenter la commutation multilingue dans Vue

Comment implémenter la commutation multilingue dans Vue

Avec le développement de la mondialisation, les sites Web multilingues sont devenus une exigence de plus en plus courante. Dans le développement de Vue, la manière d'implémenter la commutation multilingue est une question importante. Cet article présentera une méthode pour implémenter la commutation multilingue dans Vue et fournira des exemples de code spécifiques.

1. Préparation
Avant de commencer à mettre en œuvre la commutation multilingue, nous devons préparer les packages linguistiques requis pour le multilingue. Un module linguistique est un fichier JSON qui contient toutes les langues qui doivent être prises en charge, et chaque langue correspond à un fichier JSON. Par exemple, nous avons préparé deux packages linguistiques, anglais (en.json) et chinois (zh.json), comme suit :

en.json :
{
"hello": "Hello",
"world": " World",
"welcome": "Bienvenue sur mon site Web!"
}

zh.json：
{
"hello": "bonjour",
"world": "world",
"welcome": "Bienvenue" sur mon site Web!"
}

2. Créez un composant de changement de langue
Nous pouvons créer un composant appelé LanguageSwitcher pour implémenter le changement de langue. Ce composant contient un menu déroulant pour changer de langue. Dans les données de ce composant, nous pouvons définir une variable currentLanguage pour enregistrer la langue actuellement sélectionnée.

<script><br>export par défaut {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { currentLanguage: &quot;en&quot; };</pre><div class="contentsignin">Copier après la connexion</div></div><p>},<br> méthodes : {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>changeLanguage() { // 在这里更新语言 }</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>};<br></script>

3. Implémenter une logique de changement de langue
Dans la méthode changeLanguage du composant LanguageSwitcher, nous pouvons mettre à jour la langue actuelle en fonction de la langue sélectionnée et importer le package de langue correspondant dans notre In. l'instance Vue.

importer en depuis "./langues/en.json";
importer zh depuis "./langues/zh.json";

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

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

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

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

}
}

Dans notre instance Vue, nous pouvons définir une langue variable pour stocker le package de langue actuel.

new Vue({
data() {

return {
  language: {}
};

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

4. Utilisation de plusieurs langues
Une fois que nous avons importé le package de langue dans l'instance Vue, nous peut utiliser plusieurs langues n'importe où dans l'application. Le module linguistique actuel est accessible à l'aide de $root.langue.

De cette façon, nous pouvons facilement implémenter la commutation multilingue dans les applications Vue. Mettez simplement à jour les importations du module linguistique et utilisez $root.langue pour obtenir la langue actuelle.

Résumé
Cet article présente comment implémenter la commutation multilingue dans Vue et fournit des exemples de code spécifiques. En créant un composant de changement de langue, nous pouvons facilement changer de langue et utiliser plusieurs langues n'importe où dans l'application. J'espère que cet article vous aidera à comprendre la commutation multilingue de Vue !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!