vue-router 和 vue-i18n 在router中实现国际化

最新推荐文章于 2024-03-17 23:18:41 发布
最新推荐文章于 2024-03-17 23:18:41 发布
阅读量1.4w 收藏 11
点赞数 6
分类专栏： vue-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhuswy/article/details/80606045
版权

今天遇到个需求，需要在router中实现国际化，试了半天发现 router 和 i18n 是同级的，在router中调用this.$t()会报错，那么我们可以换种思路：
在我的翻译文件中写好需要翻译的key，替换路由中的title，在用到title的地方使用i18n进行国际化，如下
1) 在zh.js 和 en.js中分别写好key：
这里写图片描述
2) 在router中的title位置进入该key
这里写图片描述
3) 在使用该路由title的地方使用i18n {{$t(item.name)}}进行国际化
这里写图片描述

【从零到一实现Vue3国际化完整指南】
weixin_37342647的博客
02-21 433
国际化（Internationalization，简称i18n）是指让软件产品能够适应不同语言和地区需求的技术方案。
14.i18n在vue项目中使用(国际化)
weixin_47254130的博客
03-13 563
i18n：i18n是 Internationalization 这个英文的简写，即国际化的意思，vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换，以适应不同地区用户的需求。 1.安装vue-i18n npm install vue-i18n --save 2.main.js中全局引入i18n import VueI18n from "vue-i18n"; 3.注册： Vue.use(VueI18n); 4.实例化i18n并引入语言文件： const i18n = new Vu
vue-router 路由嵌套显示不出来_使用Vue Router高级用法进行Vue.js国际化(i18n)和本地化(l10n)
weixin_39801465的博客
11-20 1067
在任何前端框架中设置国际化(i18n)都可以通过使用不同的技术来完成。大多数企业级应用程序对页面的每个语言版本使用不同的url，而不是使用cookie、本地存储或浏览器设置来调整页面上的内容语言。搜索引擎(例如Google)也建议使用此方法。例如，如果你打开一个像apple.com这样的网站，它会以默认语言加载(在这里是US English)。但是，如果您想将语言更改为法语，则您的偏好语言将显示在...
vue项目中 当我们的router.js需要国际化的语言
xiaoqin5的博客
04-18 869
比如在request.JS中 在处理请求的时候 需要弹出提示 这时候需要中英文 我们可以用 window.EApp.$t('message.Networkoutageorserverconfigurationerror') 但是在一些.JS文件中是用不了的 比如下面的 router.JS文件 下面是解决办法。$tc方法中第一个参数是要翻译的键，第二个参数是要替换的参数，第三个参数是要选择的复数形式。需要注意的是，在router.js文件中使用国际化语言的设置需要先引入i18n实例。
简单记一下Vue router 路由中使用 vue-i18n 进行标题国际化
Samle的博客
09-15 2011
简单记一下Vue router 路由中使用 vue-i18n 进行标题国际化
vue 子路由i_Vue中带有路由器和i18n的简单入门套件
cuk5239的博客
07-23 305
vue 子路由i Vue样板 (vue-boilerplate) A pithy starter kit with router & i18n in Vue. This repo has been added easter-eggs-collection.js this funny script written by WeiChiaChang, if you don't like it, ...
vue 管理后台 引入I18n 配置 中英文功能切换（完整版）结合vue-router
蓝胖子的博客
03-02 4113
99
vue实现多语言国际化(vue-i18n)，结合element ui、vue-router、echarts以及joint等。
aicongchuo5501的博客
03-19 1144
老板说我们的项目要和国际接轨，于是乎，加上了多语言（vue-i18n）。项目用到的UI框架是element ui ，后续echarts、joint等全都得加上多语言。 一、言归正传，i18n在vue项目里如何使用呢？ 第一步，Hold On！不对啊，肯定是先install啊，不install怎么use？急得我都和国际接轨了！！！ npm install vue-i1...
Vue项目i18n多语言国际化过程中，过滤器filter中使用国际化遇到的坑及解决办法。
一键写代码的博客
10-24 3474
1、项目实际情况： 表格内的单元格数据，通过后台返回的字段对应的替换为filters中的文字。 <template> <span>{{ scope.row.isMain | isMainFilter}}</span> </template> ....... filters:{ isMainFilter(isMain) { if (isM...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
vue-router.js
12-30
vue路由vue-router.js文件下载
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
vue-router 中router-view不能渲染的解决方法
12-08
在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。 项目目录结构 其中main.js import Vue from 'vue'; import App from './App'; import router from './router'; /*...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
vue过滤器中如何使用vue-i18n进行多语言的国际化翻译
zah521999的博客
06-07 3700
//单个过滤起的文件，在main.js中引入，全局使用import Vue from 'vue'import moment from 'moment'import accounting from 'accounting'import i18n from '../i18n/i18n'  //引入国际化语言的语言包Vue.filter('projectDate', date =&gt; moment(...
vue3.0项目+typescript+vuex4+vue-router+i18n多语言+axios+eslint项目模板
望南
10-22 236
项目框架vue3.0+typescript+vuex4+vue-router+i18n多语言+axios+eslint+element+ 包含一些验证方法库，所有公共插件提取封装，开发—测试等环境变量配置
vue简单实现国际化来看看？
曹豆芽
06-10 755
最近豆芽的接到业务需求，需要将现在的一个项目改成国际化，三种语言切换，英语，简体中文，繁体中文。话不多说，豆芽以前使用过国际化，知道vue-i18n可以实现国际化，话不多说，直接操作，实现一个简单的国际化操作。 我们先安装vue-i18n插件 npm install vue-i18n --save 在合适的地方新建我们三种语言的配置js 在main.js引入我们的vue-i18n插件和引入我们的语言包 这个时候注意不要忘记挂载到vue上 import Vue from "vue"; import App
vue项目实现多语言国际化 ，结合element ui、vue-router、echarts
最新发布
qq_18932003的博客
03-17 948
日语都出来了，咳咳，现在，我们是不是得在main.js里边引入vue-i18n呢，然后在目录下建立language文件夹了呢！像日期控件、分页控件等，不会随着vue-i18n的配置改变而改变，换句话说，以上的代码，是不能够切换element ui内部控件的语言类型。// 在此判断lang的值，如果未定义，则让lang默认为DEFAULT_LANG，目的是为了让用户在未选择语言的时候默认为英文。哈哈哈，仔细思考一下，既然$t('key')这种写法不对，那么，我们还能想到什么呢？哈哈哈，是不是很简单啊！
vue、vuex、vue-router、vue-i18n、vue-http实践
好女绪的博客
07-22 1573
vue、vuex、vue-router、vue-i18n、vue-http实践 参考资料： Vue.js 教程 Vue.js 官方文档 Vuex 文档 震惊！喝个茶的时间就学会了vuex 使用vue-i18n实现多语言 Vuex的Getter学习 Vue-自带vue-resource插件实现http请求 专门写了个demo来做vue框架笔记，demo是基于VuexExplanation项...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值