vue3 + i18n 中英文切换

第一步:安装vue-i18n

npm install vue-i18n

第二步:配置语言包及js文件

目录如下:

英文语言包 en.js

// lang/en.js - 英文语言包
export default {menu: {      库房管理: 'Warehouse Management',入库检测: 'Incoming Inspection',       设置: 'Settings'}};

中文语言包 zh-CN.js

// lang/zh.js - 中文语言包
export default {menu: {       库房管理: '库房管理',入库检测: '入库检测',       设置: '设置'}};

js配置文件(单独设置一个文件,方便其他地方引用,直接配置在main.js中在router中调用有问题未解决)

// 引入插件
import { createI18n } from 'vue-i18n'
// 引入语言包
import zh from './zh-CN'
import en from './en'// 自动设置多语言 默认选择浏览器系统语言
const navLang       = navigator.language;    //判断当前浏览器使用的语言
const localLang     = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false;
let lang            = localStorage.getItem('language') || localLang || 'en-US';    //如果有存,取缓存的语言
// 创建 VueI18n 实例,并为 messages 和 locale 属性赋值
const i18n  = createI18n({legacy: false, //解决Not available in legacy modelocale: lang, // 设置语言类型messages:{'zh': zh, // 中文语言包'en': en // 英文语言包},silentTranslationWarn: true,globalInjection: true, // 全局注册$t方法
});
localStorage.setItem('language',lang);    //最后缓存当前使用的语言export default i18n

语言包的配置不尽相同,大家按自己项目中的需求合理配置即可,我的项目中是后台动态获取菜单(非动态路由)

第三步:调用

动态菜单的实现(组件中调用 全局变量 $t

<el-menu:default-active="$route.path"class="el-menu-vertical-demo":collapse-transition="false":unique-opened=true:router="true"background-color="#F3F5FA"><el-menu-item :index="item.url" class="one-bj" v-for="(item,index) in menuList" @click="judge(item.menuId)"><i :class="item.icon"></i>&nbsp;<div class="pos">{{$t('menu.'+item.name)}}</div>         </el-menu-item></el-menu>

中英文切换按钮:

<button @click="changeLang">{{ language }}</button>

插件import

import i18n from '@/locales'
const { t,locale } =  i18n.global  //解构出t方法
//中英文切换
const route = useRoute()
const changeLang = () => {if(language.value == "中文"){language.value = "英文"locale.value = "zh"localStorage.setItem('language','zh'); document.title = t('menu.'+route.meta.title) + '-' + t('menu.'+'风味科学') //设置网页标题  //修改页面标题中英文切换}else {language.value = "中文"locale.value = "en"localStorage.setItem('language','en'); document.title = t('menu.'+route.meta.title) + '-' + t('menu.'+'风味科学') //设置网页标题}
}

以上为页面中的使用。

在router中的使用,同样需要先引入插件并导入用到的方法

直接路由中使用

 {path:'/home',name:'home',component:() => import('@/views/OverView.vue'),meta:{title:t('menu.'+'整体概览'),requireAuth:true}},

上述方法页面标题只有在刷新页面的时候会更改中英文,点击中英文切换按钮的时候并不会实时改变

所以我们需要在路由守卫中进行处理,同时配合按钮切换的时候document.title的改变

router.beforeEach((to,from,next)=>{const title = ( t('menu.'+to.meta.title) ? t('menu.'+to.meta.title) : "" ) + '-' + t('menu.'+'科学') //设置网页标题document.title = titleconst pathArr = ['/home',''] if(pathArr.indexOf(to.path) !== -1){if(localStorage.getItem('token')){next()}else{next("/login")}}else{next()}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/44592.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为ensp实现防火墙的区域管理与用户认证

实验环境 基于该总公司内网&#xff0c;实现图片所在要求 后文配置请以本图为准 接口配置与网卡配置 1、创建vlan 2、防火墙g0/0/0与云页面登录 登录admin,密码Admin123&#xff0c;自行更改新密码 更改g0/0/0口ip&#xff0c;敲下命令service-manage all permit 网卡配置…

Elastic Stack--15--聚合查询(SUM、MAX、MIN、AVG)案例

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 ES的聚合查询(SUM、MAX、MIN、AVG)1.求和查询2.求平均值3.最大最小值查询4.唯一值查询 (类似于sql中的distinct 去重)5.stats聚合 ES的聚合查询(SUM、MAX、MIN、AVG…

Qt:13.多元素控件(QLinstWidget-用于显示项目列表的窗口部件、QTableWidget- 用于显示二维数据表)

目录 一、QLinstWidget-用于显示项目列表的窗口部件&#xff1a; 1.1QLinstWidget介绍&#xff1a; 1.2属性介绍&#xff1a; 1.3常用方法介绍&#xff1a; 1.4信号介绍&#xff1a; 1.5实例演示&#xff1a; 二、QTableWidget- 用于显示二维数据表&#xff1a; 2.1QTabl…

YOLOv10改进 | Conv篇 | 利用YOLO-MS的MSBlock轻量化网络结构(既轻量又长点)

一、本文介绍 本文给大家带来的改进机制是利用YOLO-MS提出的一种针对于实时目标检测的MSBlock模块(其其实不能算是Conv但是其应该是一整个模块)&#xff0c;我们将其用于C2f中组合出一种新的结构&#xff0c;来替换我们网络中的模块可以达到一种轻量化的作用&#xff0c;我将其…

软航文档控件VUE示例运行及控件替换方法记录

目录 示例运行 步骤一、npm install 步骤二、npm run dev 软航文档控件替换 附 vue小白记录一下软航文档控件VUE示例的运行方法以及示例中控件的替换过程。 示例运行 在已经安装好VUE环境的电脑上&#xff0c;VUE环境部署可以参考另一篇&#xff1a;配置VUE环境过程中 …

Drools开源业务规则引擎(六)- Drools Flow中RuleFlow文件即*.rf文件介绍

文章目录 Drools开源业务规则引擎&#xff08;六&#xff09;- RuleFlow文件即*.rf文件介绍1.\<header>1.1.\<imports>a.标签格式b.属性说明c.示例代码 1.2.\<globals>a.标签格式b.属性说明c.示例代码 1.3.\<functionImports>a.标签格式b.属性说明c.示…

Open3D 计算点云FPFH特征

目录 一、概述 1.1法线估计 1.2SPFH&#xff08;Simplified Point Feature Histograms&#xff09;计算 1.3FPFH计算 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2计算数据 一、概述 FPFH&#xff08;Fast Point Feature Histogram&#xff0…

安全策略与用户认证综合实验

一、实验拓扑 二、实验需求 1,DMZ区内的服务器,办公区仅能在办公时间内(9:00-18:00)可以访问,生产区的设备全天可以访问. 2,生产区不允许访问互联网,办公区和游客区允许访问互联网 3,办公区设备10.0.2.10不允许访问DMz区的FTP服务器和HTTP服务器,仅能ping通10.0.3.10 4,办公区…

nginx初理解

没有ngix时&#xff0c;有两台服务器&#xff0c;供访问 1. 现在有两台服务器上同样的路径下都放了一个&#xff0c; 都能通过ip加端口访问到页面 后端项目 &#xff08;查看tomcat中的配置中的 server.xml&#xff0c;能找到项目路径&#xff09; tomacat 也都有 两个…

C++ | Leetcode C++题解之第228题汇总区间

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<string> summaryRanges(vector<int>& nums) {vector<string> ret;int i 0;int n nums.size();while (i < n) {int low i;i;while (i < n && nums[i] nums[i - 1] …

pytorch-RNN实战-正弦曲线预测

目录 1. 正弦数据生成2. 构建网络3. 训练4. 预测5. 完整代码6. 结果展示 1. 正弦数据生成 曲线如下图&#xff1a; 代码如下图&#xff1a; 50个点构成一个正弦曲线随机生成一个0~3之间的一个值&#xff08;随机的原因是防止每次都从相同的点开始&#xff0c;50个点的正弦曲…

《C++设计模式》状态模式

文章目录 一、前言二、实现一、UML类图二、实现 一、前言 状态模式理解最基本上的我觉得应该也是够用了&#xff0c;实际用的话&#xff0c;也应该用的是Boost.MSM状态机。 相关代码可以在这里&#xff0c;如有帮助给个star&#xff01;AidenYuanDev/design_patterns_in_mode…

【PTA天梯赛】L1-005 考试座位号(15分)

作者&#xff1a;指针不指南吗 专栏&#xff1a;算法刷题 &#x1f43e;或许会很慢&#xff0c;但是不可以停下来&#x1f43e; 文章目录 题目题解try1 编译错误正确题解 总结 题目 题目链接 题解 try1 编译错误 #include<bits/stdc.h> using namespace std;typedef…

sdwan是硬件还是网络协议?

SD-WAN&#xff08;Software-Defined Wide Area Network&#xff0c;软件定义广域网&#xff09;并不是一个硬件产品或单一的网络协议&#xff0c;而是结合了软件、硬件和网络技术的一种解决方案。SD-WAN的核心在于其软件定义的特性&#xff0c;它通过软件来控制和管理广域网的…

ENSP软件中DHCP的相关配置以及终端通过域名访问服务器

新建拓扑 配置路由器网关IP 设备配置命令&#xff1a;<Huawei> Huawei部分为设备名 <>代表当下所在的模式&#xff0c;不同模式下具有不同的配置权限<Huawei> 第一级模式&#xff0c;最低级模式 查看所有参数<Huawei>system-view 键入系统视图…

鸿蒙开发:每天一个小bug----鸿蒙开发路由跳转踩坑

一、前言 报错内容显示找不到页面 &#xff0c;肯定我们页面没写对呗&#xff01; 可能是这几个原因:1.main_pages.json没配置路由 {"src": ["pages/02/UserInfoClass","pages/02/AppStorageCase02"] } 2.跳转路径没写对 错误&#xff1a;…

Excel第29享:基于sum嵌套sumifs的多条件求和

1、需求描述 如下图所示&#xff0c;现要统计12.17-12.23这一周各个人员的“上班工时&#xff08;a1&#xff09;”。 下图为系统直接导出的工时数据明细样例。 2、解决思路 首先&#xff0c;确定逻辑&#xff1a;“对多个条件&#xff08;日期、人员&#xff09;进行“工时”…

形态学图像处理

1 工具 1.1 灰度腐蚀和膨胀 当平坦结构元b的原点是(x,y)时&#xff0c;它在(x,y)处对图像f的灰度腐蚀定义为&#xff0c;图像f与b重合区域中的最小值。结构元b在位置(x,y)处对图像f的腐蚀写为&#xff1a; 类似地&#xff0c;当b的反射的原点是(x,y)时&#xff0c;平坦结构元…

react学习——24redux实现求和案例(精简版)

1、目录结构 2、count/index.js import React, {Component} from "react"; //引入store,用于获取数据 import store from ../../redux/store export default class Count extends Component {state {count:store.getState()}componentDidMount() {//监测redux中的…

传言称 iPhone 16 Pro 将支持 40W 快速充电和 20W MagSafe

目前&#xff0c;iPhone 15 和 iPhone 15 Pro 机型使用合适的 USB-C 电源适配器可实现高达 27W 的峰值充电速度&#xff0c;而 Apple 和授权第三方的官方 MagSafe 充电器可以高达 15W 的功率为 iPhone 15 机型进行无线充电。所有四款 iPhone 15 机型均可使用 20W 或更高功率的电…