Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to achieve vue element plus multilingual switching". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to achieve vue element plus multilingual switching.

Solve the problem:

How to achieve multilingual switching?

How to dynamically switch languages and change the elementUI language?

Will the elementUI component view not be updated after the change?

How to use the $t function globally?

How to use vue-i18n in js files?

How to achieve multilingual switching? 1. Install the package vue-i18nnpm I vue-i18n-- save2, and create a new one in the src directory as shown below:

En.js

Const EN = {login: {title: 'User Login'},} export default EN

Pl-pl.js

Const PL_PL = {login: {title:'U ytkownik jest zalogowany'},} export default PL_PL

Zh-cn.js

Const ZH_CN = {login: {title: 'user login'},} export default ZH_CN

Index.js

Import {createI18n} from 'vue-i18n/index'import' dayjs/locale/zh-cn'import zh from'. / zh-cn'import en from'. / en'import pl from'. / pl-pl'const messages = {'zh-cn': zh,' en': en 'pl': pl} / / Gets the current localeexport function getLanguage () {/ / Use the language of choice const chooselang = localStorage.getItem (' locale') if (chooselang) return chooselang / / if not shoose language const lang = (navigator.language | | navigator.browserLanguage). ToLowerCase () const locales = Object.keys (messages) return locales.includes (lang)? Lang: 'zh-cn'} const i18n = createI18n ({locale: getLanguage (), fallbackLocale:' en', global: true, messages}) export function $t (args) {return i18n.global.tc (args)} console.log ($t ('login.title')) export default (app) = > {app.use (i18n)}

Description

The getLanguage function determines whether the current localStorage has selected a language. If not, get the language of the current browser.

Encapsulate the $t function and export it for use in js files

3. Import language in main.js, {getLanguage, $t} from'. / language'language (app) 4, use / / 1. {{$t ('login.title')}} / / 2 in vue file. How to dynamically switch languages and change the elementUI language? 1. Make use of vuex Write a method in mutations to change the element language / /-state-- import {getLanguage} from'@ / language'const state = {lang: getLanguage ()} export default state//-mutations -- import * as Types from'. / types'import locale from 'element-plus/lib/locale'import localeZH from' element-plus/lib/locale/lang/zh-cn'import localeEN from 'element-plus/lib/locale/lang/en'import localePL from' element-plus/lib/locale/lang/pl'const element = {'zh-cn': localeZH 'en': localeEN,' pl': localePL} const mutations = {/ / switch languages [Types.SET_LANG] (state, lang) {state.lang = lang localStorage.setItem ('locale') Lang) locale.use (Element [Lang])} export default mutations//-types--export const SET_LANG = 'SET_LANG'2, use import * as Types from' @ / store/types'import {useI18n} from "vue-i18n" Export default {setup (props,ctx) {const {locale: lang} = useI18n ({useScope: "global"}) let store = useStore () const handelLanguage = (name) = > {lang.value = name store.commit (Types.SET_LANG, name)} return {handelLanguage} the elementUI component view is not updated after the change?

At this point, you will find that even if we submit commit to change the elementUI language page, there is no change, because the view component has not been updated, how to refresh the component to reload it?

1 、 Control View Show / hide /-- template--//-script-- on router-view -const reload = () = > {state.isReloadRouter = false nextTick (() = > {state.isReloadRouter = true})} provide ("reload" Reload) 2. Call reload const handelLanguage = (name) = > {lang.value = name store.commit (Types.SET_LANG, name) inject ('reload') ()} 3 when switching languages. Call commit in main.js. Otherwise, entering elementUI for the first time will not change the language import language, {getLanguage, $t} from'. / language'import'@ / styles/elementDefault.scss'store.commit (Types.SET_LANG, getLanguage ()) how to use the $t function globally? How to use vue-i18n in js files?

Hang the $t function globally and use the $t function directly in the js file.

Method 1: hang to the global through app.config.globalProperties

Method 2: realize it through provide and inject

Import language, {getLanguage, $t} from'. / language'const app = createApp (App) / /-app.config.globalProperties-- app.config.globalProperties.$t = $t app.config.globalProperties.$t / use import {getCurrentInstance} from 'vue'const {proxy} = getCurrentInstance () proxy.$t () /-provide, Inject-/ / app.provide in main.js ('$t') $t) / / use const $t = inject ('$t') ElMessage.warning ({message: $t ('login.warnMessage'), type:' warning'}) Vue3 does not recommend mounting something on the prototype chain, but provide and inject are more recommended. Therefore, it is better to use the function import {$t} from'@ / language' {path:'/ mainManage/device', name: 'device', hidden: false, meta: {icon:' circle', title: $t ('router.device')} by introducing the function import {$t} from' @ / device', hidden: false, meta: {icon: 'circle', title: $t (' router.device')} directly in router.js. Component: () = > import (/ * webpackChunkName: "device" * /'@ / views/mainManage/device')}, thank you for reading The above is the content of "how to achieve vue element plus multilingual switching". After the study of this article, I believe you have a deeper understanding of how to achieve vue element plus multilingual switching, and the specific usage needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.