Vue implementiert die Sprachumschaltung

Bei der Entwicklung mehrsprachiger Websites ist der Sprachwechsel eine sehr wichtige Funktion. Als modernes Front-End-Framework kann Vue selbstverständlich Sprachumschaltfunktionen implementieren. In diesem Artikel stellen wir vor, wie Sie mit Vue die Sprachumschaltung implementieren.

1. Das Prinzip der Sprachumschaltung

Um die Sprachumschaltung auf der Website zu implementieren, müssen wir die folgenden Schritte ausführen:

1. Sprachressourcendateien erstellen und Text in verschiedenen Sprachen in verschiedenen Dateien speichern aktueller Sprachtyp Im lokalen Speicher speichern;
2. Verwenden Sie in der Vue-Vorlage die entsprechende Sprachressourcendatei, um den Originaltext zu ersetzen.
3. 2. Sprachumschaltung implementieren

Sprachressourcendateien erstellen

1. Erstellen Sie ein lang-Verzeichnis im Verzeichnis /src, um Sprachressourcendateien zu speichern. Die Sprachressourcendatei kann eine JSON-Formatdatei oder eine JS-Formatdatei sein. In diesem Artikel verwenden wir Dateien im JSON-Format.

Erstellen Sie im Verzeichnis lang eine Datei zh-cn.json, um chinesische Textressourcen zu speichern. Der Inhalt lautet wie folgt:

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

Erstellen Sie dann eine en-us.json-Datei im Lang-Verzeichnis, um englische Textressourcen zu speichern. Der Inhalt lautet wie folgt:

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

Speichern Sie den aktuellen Sprachtyp

2. Im Vuex-Store können wir localStorage verwenden, um den aktuellen Sprachtyp zu speichern. Fügen Sie in der Datei „store.js“ den folgenden Code hinzu:

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)
    },
  },
})

Text in der Vorlage ersetzen

3. In der Vorlage der Vue-Komponente können wir die Funktion $vuetify.lang.get verwenden, um die entsprechende Textressource abzurufen. $vuetify.lang ist ein von Vuetify bereitgestelltes Objekt zum Abrufen von Textressourcen. In diesem Artikel verwenden wir Vuetify als UI-Framework für 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>

Implementierung der Funktion zum Umschalten der Sprache

4. In der Vue-Komponente müssen wir eine Funktion zum Umschalten der Sprache definieren. In diesem Artikel wechseln wir zwischen Chinesisch und Englisch, das je nach tatsächlichem Bedarf erweitert werden kann.

<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>

Es ist zu beachten, dass wir den Wert von $vuetify.lang.current auf die aktuelle Sprache setzen müssen, um später die entsprechenden Textressourcen zu erhalten.

3. Vollständiger Code

<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. Zusammenfassung

In diesem Artikel haben wir die Methode zur Verwendung von Vue zur Implementierung der Sprachumschaltung vorgestellt. Bei der Implementierung der Sprachumschaltung müssen wir Sprachressourcendateien erstellen, den aktuellen Sprachtyp speichern und Text in der Vorlage ersetzen. In der Funktion, die die Sprachumschaltung implementiert, müssen wir den Wert von $vuetify.lang.current auf die aktuelle Sprache setzen, damit wir später die entsprechenden Textressourcen erhalten können.

Das obige ist der detaillierte Inhalt vonVue implementiert die Sprachumschaltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!