欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項目實現(xiàn)中英文切換的詳細步驟

 更新時間：2023年11月15日 10:18:57   作者：洛千瑤吖  
這篇文章主要給大家介紹了關于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代表項目的不同模塊，每個模塊下都有對應的頁面）

步驟三：簡單編寫下基本界面

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'   //設置中英文模式
      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">點我跳轉part1 page2</a>
    </div>
</template>

<script>
export default {
    methods: {
        gopart1page2() {
            // 跳轉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">點我跳轉part2 page1</a>
        <br>
        <a style="color: red;" @click="goback">返回</a>
    </div>
</template>

<script>
export default {
    methods: {
        gopart2page1() {
            // 跳轉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 data

language/data/part1/page2.js

const data = {
    ZH: {
        // part1 page1
        content: "我是part1page2,喜歡吃草莓！"
    },
    EN: {
        content: "I am Part1Page1 and enjoy eating strawberries!"
    }
}
export default data

language/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 data

language/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 en

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

總結 

到此這篇關于vue項目實現(xiàn)中英文切換的文章就介紹到這了,更多相關vue中英文切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • 詳解搭建一個vue-cli的移動端H5開發(fā)模板

    詳解搭建一個vue-cli的移動端H5開發(fā)模板

    這篇文章主要介紹了詳解搭建一個vue-cli的移動端H5開發(fā)模板，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-01-01
  • Vue首屏加載過慢的優(yōu)化方法

    Vue首屏加載過慢的優(yōu)化方法

    Vue 應用在首屏加載時速度過慢,通常與以下問題有關：打包文件過大、網(wǎng)絡請求過多、資源加載過慢,針對這些問題,本文給大家介紹了Vue首屏加載過慢的優(yōu)化方法,需要的朋友可以參考下
    2025-01-01
  • Vue-cli3生成的Vue項目加載Mxgraph方法示例

    Vue-cli3生成的Vue項目加載Mxgraph方法示例

    這篇文章主要介紹了Vue-cli3生成的Vue項目加載Mxgraph方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-05-05
  • vue element實現(xiàn)多個Formt表單同時驗證

    vue element實現(xiàn)多個Formt表單同時驗證

    這篇文章主要介紹了vue element實現(xiàn)多個Formt表單同時驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • vue3.2?reactive函數(shù)問題小結

    vue3.2?reactive函數(shù)問題小結

    reactive用來包裝一個對象，使其每個對象屬性都具有響應性（也就是深層次響應式），這篇文章主要介紹了vue3.2?reactive函數(shù)注意點及問題小結,需要的朋友可以參考下
    2022-12-12
  • 詳解vue項目中如何加載markdown

    詳解vue項目中如何加載markdown

    這篇文章主要為大家詳細介紹了在vue項目中如何加載markdown,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2024-11-11
  • mpvue+vuex搭建小程序詳細教程(完整步驟)

    mpvue+vuex搭建小程序詳細教程(完整步驟)

    這篇文章主要介紹了mpvue+vuex搭建小程序詳細教程(完整步驟)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 詳解vue填坑之解決部分瀏覽器不支持pushState方法

    詳解vue填坑之解決部分瀏覽器不支持pushState方法

    這篇文章主要介紹了詳解vue填坑之解決部分瀏覽器不支持pushState方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • 說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法

    說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法

    這篇文章主要介紹了說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • Vue實現(xiàn)萬年日歷的示例詳解

    Vue實現(xiàn)萬年日歷的示例詳解

    又是一個老生常談的功能，接下來會從零實現(xiàn)一個萬年日歷，從布局到邏輯，再到隨處可見的打卡功能。文中的示例代碼簡潔易懂，需要的可以參考一下
    2023-01-01

最新評論