vue框架國際化(基于element-ui)-02

繼01之后,本篇記錄關(guān)于側(cè)邊欄菜單國際化設(shè)置步驟

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)" />
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容