深入vue-element-admin（一）--国际化(router中实现)

vue-element-admin实现语言切换国际化

从github下载的vue-element-admin源码是没有中文版的，那么第一步就来解决这个问题吧。

1.使用vue-i18n

import VueI18n from 'vue-i18n'
Vue.use(Cookies)
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'en', // 语言标识
  messages: {
    zh: require('./assets/lang/zh'),
    en: require('./assets/lang/en')
  }
})
//vue的实例

new Vue({
  el: '#app',
  i18n,
  router,
  store,
  render: h => h(App)
})

2.在src目录下创建lang文件夹，用来配置中英文配置文件

文件夹结构

lang

zh.js
en.js

module.exports = {
  login: {
    title: '登录',
    userName: '用户名',
    password: '密码',
    connect: '联系',
    loginBtn: '登录',
    language: '语言'
  },
  content: {
    main: '这里是内容'
  }
}
en.js
module.exports = {
  login: {
    title: 'login',
    userName: 'userName',
    password: 'password',
    connect: 'Or connect with',
    loginBtn: 'login',
    language: 'language'
  },
  content: {
    main: '这里是内容'
  }
}

3.语言切换的组件

因为vue-element-admin是基于element的，所以element的组件在该项目中也是适用的。效果如下：

图片.png


            
              
                {{$t('login.language')}}
              
              
                English
                中文

@command="handleCommand"是点击事件的钩子，通过该事件绑定对默认的语言进行切换

handleCommand(command) {
      this.$message("click on item " + command);
      this.$i18n.locale = command;
    }

似乎问题已经解决了~~~
但是，刷新或者关闭浏览器后，那么这种操作是不能保持的，所以，我们想记录下用户的偏好喜欢，在下一次使用时不用做重复操作了。
so~把状态存储到缓存或者cookie中去吧。
那么需要改动一些地方：
1.语言选择时，将状态存储cookie
2.加载页面时读取cookie内容

设置cookie:
Cookies.set("language", command, { expires: 7 });
cookie是引入的js-cookie npm安装/vue-element-admin其实是安装好的
expires:7是设置的cookie过期时间，不设置的话，浏览器关闭时，cookie失效，（亲测）
在main.js中读取--初始化时修改为：
const i18n = new VueI18n({
  locale: Cookies.get('language') || 'en', // 语言标识
  messages: {
    zh: require('./assets/lang/zh'),
    en: require('./assets/lang/en')
  }
})

大功告成~
似乎，element文档里，有其他配置好的语言包，后面如果用到再补充说明吧

二更~~~（router路由中实现）

前面解决了i18n在vue文件中的引用，然后在后面想在路由文件中实现，在文档中查询在js使用方式为：this.$t.('xxx.xx')'xxx.xx')
例如：router-table

{
    path: "inline-edit-table",
      component: () => import("@/views/table/inline-edit-table"),
      name: "InlineEditTable",
      meta: { title: this.$t.("route.inlineEditTable" )}
    },

但是，这样是错误的，提示$t是undefined
原因是：this的指针在router的配置文件中指向的不是vue（猜测的）
于是乎，有去github上找到分支版本研究，找到了解决方案。
在untils工具目录下新建一个i18n.js对路由配置的名称做一次中转：

// translate router.meta.title, be used in breadcrumb sidebar tagsview
export function generateTitle(title) {
  const hasKey = this.$te("route." + title);
  if (hasKey) {
    // $t :this method from vue-i18n, inject in @/lang/index.js
    const translatedTitle = this.$t("route." + title);

    return translatedTitle;
  }
  return title;
}

然后在导航vue文件中调用（SiderbarItem.vue）

只是截取了部分代码，详细的请查询：
vue-element-admin