我的菜单是动态生成的,就是菜单名是遍历外部的菜单配置信息menuConfig.js文件的得到的,现在我想使用国际化,用的vue-I18n。我该怎么设置,才能在menuConfig.js中使用国际化的信息呢?
我在网上找的案例都是基于组件使用$t函数的,没看到不在组件里使用的例子。
menuConfig.js如下
const menu = [
{
menu1: "menu1"
mark: "xxx",
},
{
menu2: "menu2"
mark: "xxx",
},
……
]
国际化的信息文件
const messages = {
zh:{
menu1: "菜单一"
},
en:{
menu1:"'menu1
}
}
如上述代码所示,我想在menuConfig.js里应用国家化,这该怎么办啊?
可以在Vue实例中使用Vue-i18n插件来设置国际化包,然后将其作为props传递给菜单组件。在菜单组件中,可以使用props来获取国际化包的信息。
在Vue实例中设置国际化包:
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './locales';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'en', // set locale
messages, // set locale messages
});
new Vue({
el: '#app',
i18n,
render: h => h(App),
});
在菜单组件中获取国际化包的信息:
export default {
props: ['i18n'],
methods: {
getMenuTitle(menu) {
return this.i18n.t(menu.title);
},
},
};
然后在使用菜单组件的地方传递i18n作为props:
<menu-component :i18n="i18n"></menu-component>