vue框架国际化(基于element-ui)-02

继01之后,本篇记录关于侧边栏菜单国际化设置步骤

1.新建src/utils/i18n.js

// translate router.meta.title, be used in breadcrumb sidebar tagsview
export function generateTitle(title) {
  const hasKey = this.$te('route.' + title)
  const translatedTitle = this.$t('route.' + title) // $t :this method from vue-i18n, inject in @/lang/index.js
  if (hasKey) {
    return translatedTitle
  }
  return title
}

2.src/lang/en.js src/lang/zh.js添加国际化项

样例如下:

route: {
    Dashboard: '仪表盘',
    Charts: '图表'
}

3.SidebarItem.vue中引入i18n工具并使用工具进行国际化翻译

......
import { generateTitle } from '@/utils/i18n'
export default {
......
  methods: {
    generateTitle,
    ......
  }
......
}
......

使用示例:

<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateTitle(onlyOneChild.meta.title)" />
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容