How to implement multi-language switching in Vue

How to implement multi-language switching in Vue

With the development of globalization, multi-language websites have become an increasingly common requirement. In Vue development, how to implement multi-language switching is an important issue. This article will introduce a method to implement multi-language switching in Vue and provide specific code examples.

1. Preparation
Before starting to implement multi-language switching, we need to prepare the language packages required for multi-language. A language pack is a JSON file that contains all the languages ​​that need to be supported, and each language corresponds to a JSON file. For example, we have prepared two language packages, English (en.json) and Chinese (zh.json), as follows:

en.json:
{
"hello": " Hello",
"world": "World",
"welcome": "Welcome to my website!"
}

zh.json：
{
" hello": "Hello",
"world": "World",
"welcome": "Welcome to my website!"
}

2. Create language switching Component
We can create a component named LanguageSwitcher to implement language switching. This component contains a drop-down menu for switching languages. In the data of this component, we can set a variable currentLanguage to record the currently selected language.

<script><br> export default {<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">Copy after login</div></div><p>},<br> methods: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>changeLanguage() { // 在这里更新语言 }</pre><div class="contentsignin">Copy after login</div></div><p>}<br>};<br></script>

3. Implement language switching logic
In the changeLanguage method of the LanguageSwitcher component, we can update the current language according to the selected language and import the corresponding language package into our Vue instance.

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

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

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

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

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

}
}

In our Vue instance, we can define a variable language to store the current language package.

new Vue({
data() {

return {
  language: {}
};

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

4. Use more Languages ​​
Once we import the language pack into the Vue instance, we can use multiple languages ​​anywhere in the application. The current language pack can be accessed using $root.language.

In this way, we can It is very convenient to implement multi-language switching in Vue applications. Just update the language pack imports and use $root.language to get the current language.

Summary
This article introduces the method of implementing multi-language switching in Vue and provides specific code examples. By creating a language switching component, we can easily switch languages ​​and use multiple languages ​​anywhere in the application. I hope this article will help you understand Vue multi-language switching!

The above is the detailed content of How to implement multi-language switching in Vue. For more information, please follow other related articles on the PHP Chinese website!