vue监听i18n语言切换

最新推荐文章于 2024-06-11 11:27:00 发布

原创最新推荐文章于 2024-06-11 11:27:00 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

前端总结专栏收录该内容

3 篇文章

订阅专栏

这篇博客探讨了如何根据用户选择的语言（如简体中文或美国英语）从数据库中动态加载相应内容。通过监听$i18n.locale$属性的变化，实现页面内容在zh-CN和en-US之间的切换。这种方法对于构建多语言网站或应用非常实用。

当某个页面的中英文内容是变化的，可以存储到数据库，然后根据不同的语言判断取不同的值

watch: {
    '$i18n.locale'(newValue) {
      if (this.$i18n.locale === 'zh-CN') {
       
      } else if (this.$i18n.locale === 'en-US') {
        
      }
    }
  }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Meetyouhere

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

通过 VUE watch监听实现中英文切换时元素样式改变

qq_42341171的博客

11-20

2070

通过 VUE watch监听实现中英文切换时元素样式改变 1.前言 1.写项目的时候遇到的问题：新写的网页有中英文切换功能，但是当我切换成英文的时候，文本如果给定宽度，那么有时候翻译成英文文本会过长导致换行，可能会将原本下面的元素往下挤，所以我想要实现如下功能：一个元素有两套样式，当我进行中英文切换的时候样式也随之进行切换。 2.实现之前有试过通过v-bind动态绑定style或class实现样...

vue-i18n国际化插件实现语言切换

五花漏的博客

07-01

1030

需求：在一个vue的单页面项目中实现中英文语言切换。 1、安装vue-i18n插件 npm install vue-i18n --save 安装成功后在package.json文件中查看： 2、代码实现在main.js中 import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false //1、引入插件（前提是要先引入 vue） import Vu

参与评论您还未登录，请先登录后发表或查看评论

【vue系列】i18n监听中英文变化

06-19

1463

watch: { '$i18n.locale'(newValue) { console.log('zha') if (this.$i18n.locale === 'zh-CN') { console.log('zh') } else if (this.$i18n.locale === 'en-US') { console.log('eh') } } },

vue3+vue-i18n 监听语言的切换

一只爱吃糖的小羊

08-07

1834

在切换语言的时候在几个页面中需要做出一些自定义的行为，所以需要监听语言的变化

vue i18n实现语言切换

weixin_43817709的博客

05-30

903

1.使用vue-i18n实现语言切换,需要安装vue-i18n，使用cookie记录用户选择的语言，需要安装cookie npm install vue-i18n npm install js-cookie 2.新建lang文件，然后在该文件夹新建lang.js,封装setLang()和getLang()方法，用来把用户选择的语言存取到cookie export default {...

利用vue-i18n实现多语言切换效果的方法

10-16

在进行国际化多语言切换的开发过程中，Vue.js作为一款流行的前端框架，提供了一个名为vue-i18n的插件，使得实现多语言切换变得便捷和高效。vue-i18n插件的核心功能是让开发者能够为Vue应用添加多语言支持，并轻松地...

vue3中多语言切换vue-i18n@next

无穷的博客

08-04

5426

1.下载i81n插件 npm install vue-i81n@next 或者 yarn add vue-i81n@next 2.在src在创建language文件夹，并创建js/ts文件 3.在js/ts中写入对应的语言信息 4.创建index.js/index.ts文件，导出所有信息 5.在language下创建i18n.js/i18n.ts文件(名字随意取)（注意：messages不要写错） 6.在main.js/main.ts中注册 import { createApp } from 'v

vue-i18n实现中英文切换的方法

10-15

Vue-i18n是Vue.js框架的一个插件，专门用于处理多语言支持。它使得在Vue应用程序中轻松地切换和管理不同的语言环境。在本文中，我们将深入探讨如何使用vue-i18n来实现中英文切换，以满足国际化的需求。首先，你...

vue-i18n 实现国际化，支持切换不同语言

m0_58565372的博客

07-03

6985

4.如果后端有选择是哪个语言，我们将其传给了后端，后端讲其存入了用户表，用户登录之后，会在用户接口里，返回给我们，我们将其存 localStorage,这时候，就算用户再次退出到登录页面，我们就可以将用户默认语言做一个判断，判断存入localStorage的language是否有值，如果有值，则登录页面的语言取localStorage的language，如果没有，则还是取后端语言接口返回的第一个值,这样，就可以把用户已经选择过的语言，在登录页面也能进行判断用户习惯。需求：后台管理系统，可以实现语言切换。

nuxt.js + vue-i18n + nuxt-i18n 实现多语言国际化

weixin_45693257的博客

06-23

7484

2、使用 1、新建lang文件夹，分别新建对应语言的json文件举个例子~新建zh.json：新建en.json： 2、新建文件夹plugins（放置插件），新建i18n.js 3、新建文件夹middleware（中间件），新建i18n.js 4、在store文件夹里，新建index.js 5、在nuxt.config.js中引入 6、在页面使用 7、切换语言我这里用得是bootstrapVue的组件，根据自己的页面情况而定 3、踩坑但是出现了诸多问题：一、 vuex没有数据持久化，因为nuxt

【vue随笔】监听i18n中英文切换变化

MurasakiSeiFu的博客

06-10

1389

vue监听i18n中英文切换变化

监听i18n中英文切换变化

你的小可爱的博客~

05-30

423

watch: {},

在vue3 中使用vue-i18n 实现 DataV 轮播表国际化切换

atanming1的博客

04-30

518

主要原因是vue-i18n并不会对setup内的数据进行一个监听，仅仅只是重新渲染html的内容，因此在这里需要使用computed或者watch来对相关数据进行监听，或者直接window.location进行初始化。其中静态文字直接在中使用{{t(参数名)}}就可以进行切换，但是dv-scroll-board中的表头数据却并且切换。但是问题在于，我不希望重新调用接口，而轮播表的组件参数，如果整体使用computed来监听就会导致表单内容清空，因此需要将组件参数进行处理。

vue3使用插件i18n实现国际化多语言

weixin_47529732的博客

05-07

3835

网站（https:example.com/homeView）支持繁体中文、英文，法语，日语，阿拉伯语，且要求默认路径下是英文，其他的语言切换要显示在路径上如https:example.com/zh/homeView.lang下的其他文件仿照上述改写一下就好了。

i18n vue 多语言配置，切换刷新（setLocaleMessage，mergeLocaleMessage）

Allen的博客

11-16

8923

i18n vue 多语言配置，切换刷新（setLocaleMessage，mergeLocaleMessage）

vue国际化(中英文切换)

Wx001214的博客

06-11

912

【代码】vue国际化(中英文切换)

vue3 i18n 设置国际化语言切换

u014105655的博客

03-01

3801

vue3 i18n 设置国际化语言切换

vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~

最新发布

03-25

### 如何在 Vue-i18n 中设置和管理语言包为了在 Vue-i18n 中设置和管理语言包，可以按照以下方式进行操作： #### 安装 Vue-i18n 首先，在项目中安装 `vue-i18n` 插件。可以通过 npm 或 yarn 来完成这一过程： ```bash npm install vue-i18n # 或者 yarn add vue-i18n ``` 这一步骤是为了引入必要的依赖项以便后续配置国际化功能[^1]。 #### 创建语言包文件夹通常情况下，会创建一个专门用于存储语言资源的目录结构。例如，在项目的 `src` 文件夹下新建名为 `locales` 的子文件夹，并在此基础上定义每种语言对应的 JSON 文件或 JavaScript 对象形式的语言包数据。对于中文 (Chinese)，可命名为 `zh.js`；而对于英文 (English)，则命名为 `en.js`。这些文件的内容应该是一个键值对集合，表示各个需要被翻译成目标语言的文字片段[^3]。 #### 初始化 Vue-i18n 实例接着，在入口文件（通常是 main.js 或类似的初始化脚本）中导入已准备好的语言包以及核心库本身之后，调用其工厂函数来实例化一个新的 i18n 对象。下面展示了一段典型的代码示例： ```javascript import { createApp } from 'vue'; import { createI18n } from 'vue-i18n'; // 导入语言包 import zh from './locales/zh'; import en from './locales/en'; const app = createApp(App); const i18n = createI18n({ legacy: false, locale: navigator.language || 'zh', // 设置默认语言环境 fallbackLocale: 'zh', messages: { zh, en } }); app.use(i18n); app.mount('#app'); ``` 这里特别注意设置了参数 `legacy:false`, 这是因为从版本9开始推荐使用组合式API(composition API)[^4], 并且指定了初始使用的区域设定(`locale`) 和回退方案 (`fallbackLocale`)。 #### 动态切换语言如果希望允许用户自行更改界面所呈现的具体语种，则还需要额外编写逻辑处理这部分交互行为。比如监听某个按钮点击事件触发改变当前活动状态下的 language code: ```javascript function changeLanguage(langCode){ this.$i18n.locale = langCode; } ``` 以上就是有关于如何利用 Vue-I18N 组件来进行多国语言适配的主要流程概述[^2]. ---