zoukankan      html  css  js  c++  java
  • vue实现对语言的切换,结合vue-il8n。

    1、安装vue-i18n:

                npm install vue-i18n

                如果npm长时间无反应,或安装失败,可以换成淘宝镜像安装:

                cnpm install vue-i18n

    2、在main.js中引用:

                import VueI18n from 'vue-i18n'

                Vue.use(VueI18n)

    3、在src下新建语言文件:

                src/locale/language/zh.js

                src/locale/language/en.js

           内容为:


                                     en.js

                                    zh.js

    4、新建一个common组件:

           HTML模板:


                                   HTML模板

    data数据:


                                    data数据

    6、回到main.js中创建一个i18n的实例,并挂载到vue实例中


                                 vue-i18n实力创建并挂载

    7、其实到这一步,已经基本差不多了,但是有人会问,为什么在i18n上使用了本地存储,其实这里我是为了实现点击按钮,页面不刷新、且更换语言,不然的话,我们就得手动在代码中控制语言的切换,这样做是不允许的,话不多说,直接放代码。


                                    App.vue

                                    App.vue

                                   common.vue

    注:这里利用了element-ui的一些弹窗效果,所以你需先引入element-ui,还有就是这里用到了路由,记得配置一下路由哈,我们来看一下最终效果图:


    效果图

    如果有什么不懂的,或者大佬们有一些更好的建议以及经验的分享,欢迎在评论区留言。

  • 相关阅读:
    centos yum 安装php7.2
    Linux CentOS完全卸载PHP
    Linux: cp 复制文件、文件夹到文件夹
    CentOS 7 yum安装LAMP,LNMP并搭建WordPress个人博客网站
    cin循环输入控制问题
    有序数组中的二分查找
    二叉查找树中元素的删除操作
    如何生成能在没有安装opencv库及vs2010环境的电脑上运行的exe文件
    冒泡排序算法,选择排序算法,插入排序算法
    使用迭代法穷举1到N位最大的数
  • 原文地址:https://www.cnblogs.com/blucesun/p/blucesun.html
Copyright © 2011-2022 走看看