首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue中英文切换

vue项目实现中英文切换的详细步骤

2023-11-15 10:18:57 作者：洛千瑶吖

这篇文章主要给大家介绍了关于vue项目实现中英文切换的详细步骤,项目中经常有中英文切换的功能,接下来就简单实现以下这个功能,文中通过代码介绍的非常详细,需要的朋友可以参考

需求：vue项目实现中英文切换

效果图如下：

步骤一：安装vue-i18n

注意：如果使用vue3，则不用指定版本安装，如果是vue2，就要指定版本如下：

npm i vue-i18n@8.23.0

步骤二：创建基本目录

（language文件夹是翻译的数据文件，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项目实现中英文切换的文章就介绍到这了,更多相关vue中英文切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！