使用vue 國際化i18n 實現(xiàn)多實現(xiàn)語言切換功能
更新時間：2018年10月11日 08:39:51 作者：huangenai
這篇文章主要介紹了使用vue 國際化i18n 多實現(xiàn)語言切換功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
安裝
npm install vue-i18n
新建一個文件夾 i18n ，內(nèi)新建 en.js zh.js index.js 三個文件
準備翻譯信息
en.js
export default {
home: {
helloworld: "hello workd ！"
}
};
zh.js
export default {
home: {
helloworld: "你好世界"
}
};
index.js
創(chuàng)建Vue-i18n實例
import Vue from "vue";
import VueI18n from "vue-i18n";
import enLocale from "./en";
import zhLocale from "./zh";
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: localStorage.lang || "zh",
messages: {
en: {
...enLocale
},
zh: {
...zhLocale
}
}
});
export default i18n;
i18n 掛載到 vue 根實例
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from "./assets/i18n/index";
Vue.config.productionTip = false;
Vue.prototype.$i18n = i18n;
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount("#app");
簡單的使用
about.vue
<template>
<div class="about">
<h1>{{ $t("home.helloworld") }}</h1>
<button @click="changeLang()">切換英文</button>
<p>{{hi}}</p>
</div>
</template>
<script>
export default {
data: function() {
return {};
},
computed: {
hi() {
return this.$t("home.helloworld");
}
},
methods: {
changeLang() {
this.$i18n.locale = "en";
}
}
};
</script>
注意：
比如說上面的hi 你要通過這種形式來寫的時候，不能放在data 里面，因為當語言切換的時候 他是不會變的 ，要寫在computed內(nèi)
總結(jié)
以上所述是小編給大家介紹的使用vue 國際化i18n 多實現(xiàn)語言切換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue2.0的計算屬性computed和watch的區(qū)別及各自?使用場景解讀
這篇文章主要介紹了vue2.0的計算屬性computed和watch的區(qū)別及各自?使用場景，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)ToDoList簡單實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
vue3配置permission.js和router、pinia實現(xiàn)路由攔截的簡單步驟
這篇文章主要介紹了如何在場景網(wǎng)站中實現(xiàn)對未登錄用戶訪問的攔截,通過配置Pinia,創(chuàng)建一個user.js文件來存儲用戶數(shù)據(jù),并在main.js中進行配置,同時通過在router目錄下創(chuàng)建permission.js文件,可以實現(xiàn)對未登錄用戶的攔截,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了Vue組件全局注冊實現(xiàn)警告框的實例,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
關(guān)于vue-admin-element中的動態(tài)加載路由
這篇文章主要介紹了關(guān)于vue-admin-element的動態(tài)加載路由，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue3之 頁面,菜單,路由的使用，文章圍繞Vue3頁面,菜單,路由相關(guān)資料展開詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了vue如何實現(xiàn)關(guān)閉對話框后刷新列表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 如何添加全局函數(shù)或全局變量以及單頁面的title設置總結(jié)
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁面的title設置總結(jié)，非常具有實用價值，需要的朋友可以參考下2017-06-06
詳解@Vue/Cli 3 Invalid Host header 錯誤解決辦法
這篇文章主要介紹了詳解@Vue/Cli 3 Invalid Host header 錯誤解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家介紹了VUE render函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12