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

news2024/11/16 9:30:27

问题

点击按钮跳转详情页后 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 匹配到正确的语言资源啦，解决问题~~~

正确展示：

中文语言

在这里插入图片描述

英文

在这里插入图片描述

日文

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！