当前位置: 首页 > news >正文

Vue router文件中本地路由配置使用i18n【解决tab名称出现undefined,导致i18n没有实现问题】

问题

点击按钮 跳转详情页后 tab名称出现错误,报 undefined
在这里插入图片描述## 需求
点击工单详情按钮,跳转详情页面(新页面),新页面tab栏名称 还是为 工单出库,但要求工单出库文字配置为多语言,使用i18n来配置

在这里插入图片描述

思路

点击工单详情按钮时,使用 this.$router.push({}), query传参方式,进行页面跳转。

// 工单详情按钮点击事件toDetail(index, row) {this.$router.push({path: "/orderDetail",query: {groupId: row.id,orderNo: row.orderNo,}});},

router.js 路由文件配置

  {path: '/orderDetail',component: Layout,hidden: true,redirect: 'noredirect',children: [{path: '/orderDetail',component: (resolve) => require(['@/views/neolight/workOrder/orderDetail'], resolve),name: 'orderDetail',meta: { title: 'Menu.woOrder', editName: true }}]},

tips

 meta: { title: 'Menu.woOrder', editName: true } //Menu.woOrder 为语言配置中的key 噢~

在这里插入图片描述

zh_CN.JS

 Menu: {woOrder: '工单出库',}

修改的代码

找到store ---->modules文件夹下的tagsView.js 文件

修改前

在这里插入图片描述

修改后

在这里插入图片描述
解决掉undefined问题后,tab名称就可以根据配置的i18n的key 匹配到正确的语言资源啦,解决问题~~~

正确展示:

中文语言

在这里插入图片描述

英文

在这里插入图片描述

日文

在这里插入图片描述

相关文章:

  • Android开发基础面试题,Android保活黑科技的技术实现
  • gofly接口自定义搜索条件
  • 2024.3.6
  • PTA天梯赛L1 021-030题目解析
  • 《汇编语言》- 读书笔记 - 第13章-int 指令
  • 微服务架构 | 数据同步策略
  • 《TCP/IP详解 卷一》第12章 TCP初步介绍
  • 记录前端面试的一些笔试题(持续更新......)
  • 从Win转Mac,我的感受如何
  • Matlab在同一张图中如何加入多个图例
  • 速卖通平台的API返回结果有哪些数据字段?
  • 【C++ vscode 环境问题】vscode编译的时候:未定义标识符 thread mingw-w64安装支持c++11中thread
  • Python3的十个高级功能太强大了!
  • Webserve(4): HTTP解析
  • vue全家桶详解
  • @jsonView过滤属性
  • 《剑指offer》分解让复杂问题更简单
  • 【407天】跃迁之路——程序员高效学习方法论探索系列(实验阶段164-2018.03.19)...
  • Github访问慢解决办法
  • Python爬虫--- 1.3 BS4库的解析器
  • Webpack4 学习笔记 - 01:webpack的安装和简单配置
  • 基于Volley网络库实现加载多种网络图片(包括GIF动态图片、圆形图片、普通图片)...
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 物联网链路协议
  • 新书推荐|Windows黑客编程技术详解
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • 策略 : 一文教你成为人工智能(AI)领域专家
  • 我们雇佣了一只大猴子...
  • ​​​​​​​GitLab 之 GitLab-Runner 安装,配置与问题汇总
  • #Spring-boot高级
  • (04)odoo视图操作
  • (C语言)strcpy与strcpy详解,与模拟实现
  • (pt可视化)利用torch的make_grid进行张量可视化
  • (第8天)保姆级 PL/SQL Developer 安装与配置
  • (二) Windows 下 Sublime Text 3 安装离线插件 Anaconda
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (离散数学)逻辑连接词
  • (一)kafka实战——kafka源码编译启动
  • (一)Neo4j下载安装以及初次使用
  • (一)pytest自动化测试框架之生成测试报告(mac系统)
  • (转)C#调用WebService 基础
  • (转)eclipse内存溢出设置 -Xms212m -Xmx804m -XX:PermSize=250M -XX:MaxPermSize=356m
  • .net CHARTING图表控件下载地址
  • .Net FrameWork总结
  • .net 获取url的方法
  • .net 验证控件和javaScript的冲突问题
  • .net 重复调用webservice_Java RMI 远程调用详解,优劣势说明
  • .net安装_还在用第三方安装.NET?Win10自带.NET3.5安装
  • .Net程序猿乐Android发展---(10)框架布局FrameLayout
  • @Autowired 与@Resource的区别
  • @property @synthesize @dynamic 及相关属性作用探究
  • [ 转载 ] SharePoint 资料
  • [android学习笔记]学习jni编程
  • [CakePHP] 在Controller中使用Helper
  • [HOW TO]怎么在iPhone程序中实现可多选可搜索按字母排序的联系人选择器