Vue implements language switching

In multi-language website development, language switching is a very important function. As a modern front-end framework, Vue can naturally implement language switching functions. In this article, we will introduce how to use Vue to implement language switching.

1. The principle of language switching

To implement language switching on the website, we need to perform the following steps:

1. Create language resource files and convert text in different languages Save in different files;
2. Save the current language type in local storage;
3. In the Vue template, use the corresponding language resource file to replace the original text.

2. Implement language switching

1. Create language resource file

Create a lang directory in the /src directory to store the language resource. The language resource file can be a JSON format file or a JS format file. In this article, we use JSON format files.

In the lang directory, create a zh-cn.json file to store Chinese text resources. The content is as follows:

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

Then create an en-us.json file in the lang directory to store English text resources. The content is as follows:

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

2. Save the current language type

In the Vuex store, we can use localStorage to save the current language type. In the store.js file, add the following code:

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. Replace text in the template

In the template of the Vue component, we can use $vuetify.lang. get function to obtain the corresponding text resource. $vuetify.lang is an object provided by Vuetify for obtaining text resources. In this article, we will use Vuetify as the UI framework for 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. Function to implement language switching

In the Vue component, we need to define a function for switching languages. In this article, we will switch between Chinese and English, which can be expanded according to actual needs.

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

It should be noted that we need to set the value of $vuetify.lang.current to the current language so that we can obtain the corresponding text resources later.

3. Complete 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. Summary

In this article, we introduce the method of using Vue to implement language switching. When implementing language switching, we need to create language resource files, save the current language type and replace text in the template. In the function that implements language switching, we need to set the value of $vuetify.lang.current to the current language so that we can obtain the corresponding text resources later.

The above is the detailed content of Vue implements language switching. For more information, please follow other related articles on the PHP Chinese website!