在vue-router路由中实现 i18n 多语言

最新推荐文章于 2024-05-12 22:33:21 发布
最新推荐文章于 2024-05-12 22:33:21 发布
阅读量684 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48948055/article/details/130430048
版权

路由中:

在这里插入图片描述

在i18n的语言包中有该 key => test

在这里插入图片描述
在这里插入图片描述

在页面中使用

在这里插入图片描述

改变 locale = ‘en/zh’;

效果:

在这里插入图片描述
在这里插入图片描述

下图为复杂
在这里插入图片描述

小吴加油015
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue router中如何使用i18n
这是个问题
06-29 2708
1)准备翻译 2）写入
vue-lang-router:具有（可选）本地化URL的Vue语言路由
05-03
:globe_showing_Europe-Africa: Vue语言路由器 语言路由和URL本地化变得容易。 建立在 :vertical_traffic_light: 和 :globe_with_meridians: 。 演示版 您可以在进行演示。 特征 :hourglass_not_done: 异步翻译加载 :performing_arts: 网址本地化 :classical_building: 默认语言（URL中没有语言前缀） :baby: 支持路线中的变量和子级 :automobile: :bicycle: 支持历史记录和哈希模式 :books: 设置首次访问时用户首选的语言 :memo: 再次访问网站时加载上次使用的语言 :fast-forward_button: 无需额外的路由器设置 版本信息 该版本与兼容。 如果您需要兼容版本，请签出此项目的 。 安装 Vue CLI插件（推荐） 安装Language Router的最简单方法是对Language Router使用。 该插件将修改您的路由器文件，设置转换文件等。 使用以下命令将语言路由器添加到您
Vue-i18n在Routerd动态路由下实现国际化
雪漠山堂
08-02 3574
在Electron-vue-admin的项目中实现国际化的需求时，遇到一个问题，vue-i8n无法在router/index.js的路由菜单配置项内以下面常规的方法实现。在router中实现国际化，router和i18n是同级的，所以在router中调用this.$t()会报错。2.在router路由文件夹下的js配置文件内，对应菜单的title位置写入国际化翻译对应的key。重点注意的是title位置的key需要单引号，便于动态路由页面加载时查找和实时翻译。...
2024年前端最全利用vue-i18n实现多语言切换，2024年最新京东最新前端面试真题解析
最新发布
2401_84435942的博客
05-12 497
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】模板中使用词条普通词条插值表达式中向$t方法传入词条的key值就可以了，是不是超级简单。
react-router-i18n:建立在React Router之上的国际化库
04-28
React路由器I18n 这是一个使用React Router进行I18n（国际化）的小型图书馆。 演示版 安装 yarn add react-router-i18n 请注意，此程序包具有以下对等依赖项： { " react " : " ^16.8.4 " , " react-dom " : " ^16.8.1 " , " react-router-dom " : " ^4.3.0 || ^5.0.0 " } （请参阅项目） 如何使用 演示版 请参阅演示和 设置 首先，创建一个名为I18n的组件。 它看起来应该像这样： import { createI18n } from 'react-router-i18n' ; // Array of supported locales // The first in the array is treated as the def
简单记一下Vue router 路由中使用 vue-i18n 进行标题国际化
Samle的博客
09-15 1416
简单记一下Vue router 路由中使用 vue-i18n 进行标题国际化
vue 管理后台 引入I18n 配置 中英文功能切换（完整版）结合vue-router
蓝胖子的博客
03-02 3802
99
vue-element-admin-i18n.zip
08-17
Vue Element Admin集成了多语言功能，允许开发者轻松地为不同地区和语言的用户提供本地化服务。通过配置文件，可以方便地切换和管理各种语言版本。 5. **后台管理系统模板**: 这个模板通常包括登录认证、权限控制、...
精品软件工具--用Vue.js、Vue-router、Vue-i18n、Keen-ui、Webpack、Webpack.zip
02-07
Vue-i18n是Vue.js的国际化插件，它使应用支持多语言变得简单。通过Vue-i18n，开发者可以轻松地切换应用的语言环境，提供不同的翻译资源，从而满足全球用户的语言需求。 Keen-ui是一款基于Vue.js的UI组件库，它包含...
vue 使用vue-i18n做全局中英文切换的方法
10-17
在开发多语言应用时，Vue-i18n 是一个强大的插件，它帮助开发者轻松实现应用的国际化（i18n）支持。以下是对如何使用 Vue-i18n 在 Vue 应用中进行全局中英文切换的详细说明： 1. **安装 Vue-i18n** 要开始使用 Vue...
vue-i18n实现中英文切换的方法
10-15
Vue-i18n是Vue.js框架的一个插件，专门用于处理多语言支持。它使得在Vue应用程序中轻松地切换和管理不同的语言环境。在本文中，我们将深入探讨如何使用vue-i18n来实现中英文切换，以满足国际化的需求。 首先，你...
vue-element-admin 集成框架设置中文语言
11-10
Element UI本身提供了多语言支持，包括中文，因此在vue-element-admin中设置中文语言并不复杂。以下是详细的步骤和知识点： 1. **安装i18n插件**：首先，你需要确保项目已经安装了`element-ui`的国际化插件`element...
Vue router文件中本地路由配置使用i18n【解决tab名称出现undefined，导致i18n没有实现问题】
蓝胖子的博客
03-05 692
Vue router文件中本地路由配置使用i18n【解决tab名称出现undefined，导致i18n没有实现问题】
前端Vue中多语言切换功能的实现
热门推荐
weixin_37861326的博客
04-08 1万+
在基于vue-cli项目开发过程中，多语言切换功能可使用vue-i18插件，具体实现方法如下：step1: 在项目中安装vue-i18插件cnpm install vue-i18n --save-devstep2:在项目的入口文件main.js中引入vue-i18n插件import Vue from 'vue' import router from './router' import VueI18...
vue项目中 当我们的router.js需要国际化的语言
xiaoqin5的博客
04-18 673
比如在request.JS中 在处理请求的时候 需要弹出提示 这时候需要中英文 我们可以用 window.EApp.$t('message.Networkoutageorserverconfigurationerror') 但是在一些.JS文件中是用不了的 比如下面的 router.JS文件 下面是解决办法。$tc方法中第一个参数是要翻译的键，第二个参数是要替换的参数，第三个参数是要选择的复数形式。需要注意的是，在router.js文件中使用国际化语言的设置需要先引入i18n实例。
vue2提取vue-router的title单独存放，使用i18n实现
weixin_39277183的博客
02-21 1101
vue2提取vue-router的title单独存放，使用i18n实现
vue项目实现多语言国际化 ，结合element ui、vue-router、echarts
qq_18932003的博客
03-17 759
日语都出来了，咳咳，现在，我们是不是得在main.js里边引入vue-i18n呢，然后在目录下建立language文件夹了呢！像日期控件、分页控件等，不会随着vue-i18n的配置改变而改变，换句话说，以上的代码，是不能够切换element ui内部控件的语言类型。// 在此判断lang的值，如果未定义，则让lang默认为DEFAULT_LANG，目的是为了让用户在未选择语言的时候默认为英文。哈哈哈，仔细思考一下，既然$t('key')这种写法不对，那么，我们还能想到什么呢？哈哈哈，是不是很简单啊！
利用vue-i18n实现多语言切换
前端原创分享，常年坚持记录和分享，全网阅读量超百万
10-19 2504
在angular中有ngx-translate解决i18n的需求，vue也具备这样的能力，利用vue-i18n，我们可以实现多语言的切换，可以轻松搞定大部分的需求，包括中英文切换，以及词条的变更。词条变更在基线版本真的是经常会遇到的，本人深有体会。不扯淡了，说一下vue-i18n基本的使用方法吧。
vue多语言应用
前端精髓
01-09 1099
初始化项目 Create Vue 项目和 install vue-i18n vue create vue-multilang 使用vue-i18n加载语言包 创建语言文件 多语言文件的统一入口，加载各种语言文件 // src/lang/index.js import zh from './translations/zh.json' import en from './translatio...
vite-plugin-vue-i18n
07-15
### 回答1： vite-plugin-vue-i18n是一个为Vue应用提供国际化（i18n）支持的Vite插件。Vite是一个现代化的前端构建工具，而vue-i18n是Vue官方推荐的国际化解决方案之一。 vite-plugin-vue-i18n主要提供了以下功能： 1. 支持多语言：插件可以帮助我们将Vue应用中的文本内容翻译成多种语言，使得应用能够根据用户的地理位置或语言偏好来显示相应的语言版本。 2. 动态加载：插件可以根据需要动态加载所需的语言包，避免了一次性加载所有语言资源的性能问题，提高了应用的加载速度。 3. 热重载：插件支持在开发模式下的热重载，即当我们修改了语言资源文件时，页面会自动刷新以显示最新的翻译内容，提高了开发效率。 4. 构建优化：插件可以使用Vite的优化能力，将应用中的多语言资源进行压缩和合并，减少网络请求，从而提高应用的性能。 使用vite-plugin-vue-i18n，我们可以在Vue应用中轻松地实现国际化需求。通过定义一系列的翻译文件，我们可以将应用中的文本内容翻译成多种语言。在Vue组件中，我们可以使用特定的指令或方法来访问和显示对应的翻译内容。 总之，vite-plugin-vue-i18n为我们提供了一种简洁高效的方式来实现Vue应用的国际化需求，帮助我们更好地面向全球用户开发应用。 ### 回答2： vite-plugin-vue-i18n 是一个用于在 Vite.js 项目中支持国际化的插件。Vite.js 是一个基于浏览器原生 ES 模块导入的前端构建工具，vite-plugin-vue-i18n 则是为了在 Vite.js 项目中实现国际化而开发的插件。 这个插件的主要功能是将 Vue 应用程序中的文本国际化，使开发人员能够轻松地在应用中切换和管理多种语言。它能够处理不同语言之间的文本翻译，提供了一种方式来管理和导入不同语言的翻译文件。同时，它还提供了一些工具和指令，使开发人员能够更方便地在应用程序中使用和显示多语言文本。 使用 vite-plugin-vue-i18n，开发人员可以在 Vue 组件中使用特定的指令来标记需要翻译的文本，并通过导入翻译文件来实现文本的动态切换。它支持多种文件格式，如 JSON、YAML、PO 等，可以灵活选择适合自己项目的翻译文件格式。开发人员还可以通过 API 来访问、处理和修改翻译文本。 这个插件还提供了一些其他功能，如支持 Vue 3 的 Composition API、语言切换的路由钩子、翻译文件的合并和拆分等。它还支持在开发环境和生产环境下的不同配置，并具有 TypeScript 类型支持。此外，它还可以与其他插件和构建工具无缝集成，如 Vuex、Vue Router、Vuepress 等。 总的来说，vite-plugin-vue-i18n 是一个功能强大且易于使用的插件，可以帮助开发人员快速实现 Vue 应用程序的国际化。无论是小型项目还是大型项目，都可以借助这个插件来管理多语言文本，提供更好的用户体验。 ### 回答3： vite-plugin-vue-i18n是一个适用于Vite构建工具的插件，用于集成和管理Vue.js应用程序的国际化（i18n）功能。它提供了一种简单的方式来处理多语言翻译和本地化，以便应用程序可以方便地在不同的语言环境中展示。 使用vite-plugin-vue-i18n，我们可以在Vue应用程序中轻松地定义多个语言版本的翻译文件，并在运行时根据需要加载适当的翻译信息。我们可以在单个文件中定义所有语言的翻译内容，或者根据语言划分翻译成多个文件进行管理。 该插件提供了一个全局的翻译函数$t，可以在Vue组件中使用它来获取当前语言的翻译文本。我们可以通过在模板中使用`{{ $t('key') }}`的方式来引用翻译内容。而且，我们还可以根据具体的语言环境，动态切换显示的语言版本。 vite-plugin-vue-i18n还支持自动提取模板中的翻译文本，并生成对应的翻译文件。这样我们就可以通过一个命令将应用程序中的所有翻译文本提取出来，然后交给翻译团队进行翻译，最后再将翻译结果导入到应用程序中。 总之，vite-plugin-vue-i18n是一个方便易用的工具，使得开发多语言应用程序变得更加简单和高效。它提供了一种集成且高度可定制的方式来实现应用程序的国际化需求，可以帮助我们轻松地处理不同语言环境下的文本翻译和本地化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值