Vue学习笔记

国际化

2019-05-24  本文已影响0人  smartHui

方法一:

S1.首先main.js中,引入组件LocaleProvider

S2.App.vue中,引用组件

S3.设置下拉菜单进行切换。给两个下拉菜单绑定的key值,所以在对a-menu进行点击时,可以获取到key值。然后去切换路由,把当前的路由路径,加上locale的值,进行转换。

注意:DataPicker组件本身不存在中英文,但可以通过moment来实现。定义一个moment.locale,把key值塞给这个对象即可。

 如果业务中需要中英文:推荐vue-i18n https://kazupon.github.io/vue-i18n/

方法二:

通过vue-i18n,首先建立一个文件夹:

S1:设置key,以及key对应的中英文(这里的key值尽量复杂一些,避免冲突)

S2:在main.js中引入。(queryString主要是用来处理URL的一个库,location.search是一个字段串,转换为一个对象,然后取值)

S3.使用的话,直接用$t("message"["对应的key即可"])。另外不要忘了,在进行下拉切换的时候,把对应的$i18n的locale值改掉。

s

知识点:组件库的国际化配置;moment;vue-i18n(业务代码国际化配置)

上一篇下一篇

猜你喜欢

热点阅读