vue項目實現(xiàn)中英文切換的詳細步驟
更新時間：2023年11月15日 10:18:57 作者：洛千瑤吖
這篇文章主要給大家介紹了關(guān)于vue項目實現(xiàn)中英文切換的詳細步驟,項目中經(jīng)常有中英文切換的功能,接下來就簡單實現(xiàn)以下這個功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考
需求：vue項目實現(xiàn)中英文切換
效果圖如下：
步驟一：安裝vue-i18n
注意：如果使用vue3，則不用指定版本安裝，如果是vue2，就要指定版本如下：
npm i vue-i18n@8.23.0
步驟二：創(chuàng)建基本目錄
（language文件夾是翻譯的數(shù)據(jù)文件，views文件夾下的是頁面，part1和part2代表項目的不同模塊，每個模塊下都有對應(yīng)的頁面）
步驟三：簡單編寫下基本界面
App.vue
<template>
<div id="app">
<!-- 111 -->
<!-- 中英文切換 -->
按我切換中英文
<button @click="chagelanguage">{{ language }}</button>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
language: "en",//中英文切換
}
},
methods: {
// 中英文切換
chagelanguage() {
this.$i18n.locale == 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh' //設(shè)置中英文模式
if (this.$i18n.locale === 'zh') {
this.language = "en"
} else {
this.language = "zh"
}
},
}
}
</script>
<style lang="less" scoped></style>
views/part1/page1.vue
<template>
<div>
<h1 style="color:black">part1 page1</h1>
<p><span style="color:blue;font-weight:bold;font-size: 20px;">測試文本:</span>{{ $t("part1.page1.content") }}</p>
<br>
<br>
<a style="color: red;" @click="gopart1page2">點我跳轉(zhuǎn)part1 page2</a>
</div>
</template>
<script>
export default {
methods: {
gopart1page2() {
// 跳轉(zhuǎn)part1 page2（同一模塊下的不同頁面）
this.$router.push('/part1page2Router')
}
}
}
</script>
<style>
</style>views/part1/page2.vue
<template>
<div>
<h1>part1 page2</h1>
<p><span style="color:blue;font-weight:bold;font-size: 20px;">測試文本:</span>{{ $t("part1.page2.content") }}</p>
<br>
<br>
<a style="color: red;" @click="gopart2page1">點我跳轉(zhuǎn)part2 page1</a>
<br>
<a style="color: red;" @click="goback">返回</a>
</div>
</template>
<script>
export default {
methods: {
gopart2page1() {
// 跳轉(zhuǎn)part1 page2（不同模塊下的不同頁面）
this.$router.push('/part2page1Router')
},
goback() {
// 返回上一頁面
this.$router.go(-1)
}
}
}
</script>
<style></style>views/part2/page1.vue
<template>
<div>
<h1>part2 page1</h1>
<p><span style="color:blue;font-weight:bold;font-size: 20px;">測試文本:</span>{{ $t("part2.page1.content") }}</p>
<br>
<br>
<a style="color: red;" @click="goback">返回</a>
</div>
</template>
<script>
export default {
methods: {
goback() {
// 返回上一頁面
this.$router.go(-1)
}
}
}
</script>
<style></style>router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import part1page1 from '@/views/part1/page1'
import part1page2 from '@/views/part1/page2'
import part2page1 from '@/views/part2/page1'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: part1page1
}, {
path: '/part1page2Router',
component: part1page2
}, {
path: '/part2page1Router',
component: part2page1
}
]
const router = new VueRouter({
routes
})
export default router
步驟四：編寫翻譯文件
language/data/part1/page1.js
const data = {
ZH: {
// part1 page1
content: "我是part1page1,喜歡吃蘋果！"
},
EN: {
content: "I am Part1Page1 and enjoy eating apples!"
}
}
export default datalanguage/data/part1/page2.js
const data = {
ZH: {
// part1 page1
content: "我是part1page2,喜歡吃草莓！"
},
EN: {
content: "I am Part1Page1 and enjoy eating strawberries!"
}
}
export default datalanguage/data/part1/index.js
import page1 from "./page1"
import page2 from "./page2"
export default {
page1,
page2
}language/data/part2/page1.js
const data = {
ZH: {
// part1 page1
content: "我是part2page1,喜歡吃芒果！"
},
EN: {
content: "I am Part1Page1 and enjoy eating mangoes!"
}
}
export default datalanguage/data/part2/index.js
import page1 from "./page1"
export default{
page1
}language/en.js
import part1 from './data/part1/index'
import part2 from './data/part2/index'
const en = {
language: {
name: "english"
},
// part1
part1: {
page1: {
content: part1.page1.EN.content
},
page2: {
content: part1.page2.EN.content
}
},
// part2
part2: {
page1: {
content: part2.page1.EN.content
}
},
}
export default enlanguage/zh.js
import part1 from './data/part1/index'
import part2 from './data/part2/index'
const zh = {
language: {
name: "中文"
},
// part1
part1: {
page1: {
content: part1.page1.ZH.content
},
page2: {
content: part1.page2.ZH.content
}
},
// part2
part2: {
page1: {
content: part2.page1.ZH.content
}
},
}
export default zh步驟五：全局配置
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//中英文切換
import ZH from '@/language/zh.js' //中文最終匯總暴露的信息
import EN from '@/language/en.js' //英文
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
// localStorage.getItem('languageSet') || 'zh'
locale: 'zh', //從localStorage里獲取用戶中英文選擇，沒有則默認中文
messages: {
'zh': ZH,
'en': EN
}
})
new Vue({
i18n,
router,
store,
render: h => h(App)
}).$mount('#app')另外：
如果要在js中引用如下
this.$t("part1.page1.content")在屬性中引用如下
<el-tooltip :content="$t('part1.page1.content')" placement="top"></el-tooltip>總結(jié)
到此這篇關(guān)于vue項目實現(xiàn)中英文切換的文章就介紹到這了,更多相關(guān)vue中英文切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解搭建一個vue-cli的移動端H5開發(fā)模板，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vue 應(yīng)用在首屏加載時速度過慢,通常與以下問題有關(guān)：打包文件過大、網(wǎng)絡(luò)請求過多、資源加載過慢,針對這些問題,本文給大家介紹了Vue首屏加載過慢的優(yōu)化方法,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Vue-cli3生成的Vue項目加載Mxgraph方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue element實現(xiàn)多個Formt表單同時驗證
這篇文章主要介紹了vue element實現(xiàn)多個Formt表單同時驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue3.2?reactive函數(shù)問題小結(jié)
reactive用來包裝一個對象，使其每個對象屬性都具有響應(yīng)性（也就是深層次響應(yīng)式），這篇文章主要介紹了vue3.2?reactive函數(shù)注意點及問題小結(jié),需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了在vue項目中如何加載markdown,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要介紹了mpvue+vuex搭建小程序詳細教程(完整步驟)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了詳解vue填坑之解決部分瀏覽器不支持pushState方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法
這篇文章主要介紹了說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
又是一個老生常談的功能，接下來會從零實現(xiàn)一個萬年日歷，從布局到邏輯，再到隨處可見的打卡功能。文中的示例代碼簡潔易懂，需要的可以參考一下2023-01-01