主要问题点在于 router 中无法用 this.$t('xxx.xx') 方法来进行翻译,会报错 this.$t is not a function 。而在main.js中可以使用,所以就做了一下处理:

main.js文件:

const i18n = new Vue18n({
  locale: lan,
  messages: {
    zh: require("./assets/i18n/zh"),
    en: require("./assets/i18n/en")
  },
  silentTranslationWarn: true
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = `${i18n.t('meta.'+to.meta.title)} - ${i18n.t('meta.base')}`
  }
  next()
})

navbar.vue中点击切换语言:

    changeLan(type) {
        this.$i18n.locale = type;
        document.title = `${i18n.t('meta.'+this.$route.meta.title)} - ${i18n.t('meta.base')}`
    }

router/index.js中(关键点是里面设置的title要和i18n配置中的相对应):

export default new Router({
  mode: 'history',
  routes: [
    { path: '/XX', name: 'XX',meta: { title: 'A' },……},
    { path: '/XX', name: 'XX',meta: { title: 'B' }, …… },
  ]
})

en.js/zh.js配置:

module.exports = { 
 meta:{base:'XXX',A:'XXX',B:'X',E:'XX'}
};

这样下来点击切换页面title也同时改变,爽歪歪,哈哈

当然目前代码有点冗余,两处改变document.title的方法都一样,提公用下,assets/js中新建title.js:

export function getPageTitle(i18n,key) {
  const hasKey = i18n.te(`meta.${key}`)
  const title = i18n.t(`meta.base`)
  if (hasKey) {
    const pageName = i18n.t(`meta.${key}`)
    return `${pageName} - ${title}`
  }
  return `${title}`
}

这个方法是参考 vue-element-admin i18n分支里的方法,比较完善一些。

分别在main.js和navbar.vue中引入:

import { getPageTitle } from './assets/js/title';

import { getPageTitle } from '../../assets/js/title';

main.js中:

const i18n = new Vue18n({
  locale: lan,
  messages: {
    zh: require("./assets/i18n/zh"),
    en: require("./assets/i18n/en")
  },
  silentTranslationWarn: true
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = getPageTitle(i18n,to.meta.title)
  }
  next()
})

navbar.vue中:

    changeLan(type) {
      this.$i18n.locale = type;
      document.title = getPageTitle(this.$i18n,this.$route.meta.title)
    }

然后OK。

另附上Vue i18n 官方API:

$te

  • 参数:

    • {Path} key:必填
    • {Locale} locale:可选
  • 返回值:boolean

检查 key 是否存在。在 Vue 实例中,如果未指定组件语言环境信息,则使用全局语言环境信息。如果指定了 locale,则使用 locale 的语言环境。

Logo

前往低代码交流专区

更多推荐