繼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)" />