javascript - 在 vue.js 中使用语言环境前缀路由(使用 vue-i18n)

Question

我有一个 locale.js 文件，它负责定义用户区域设置。在这里:

import store from '@/vuex/index'

let locale

const defaultLocale = 'en_US'

if (store.getters['auth/authenticated']) {
  locale = store.getters['auth/currentUser'].locale || defaultLocale
} else {
  if (localStorage.getItem('locale')) {
    locale = localStorage.getItem('locale')
  } else {
    locale = defaultLocale
  }
}

export default locale

我还有一个 i18n.js 文件，它负责生成我在初始化我的应用程序时使用的 i18n 实例。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from '@/services/locale'

Vue.use(VueI18n)

const fallbackLocale = 'en_US'

let i18n = new VueI18n({
  locale,
  fallbackLocale,
})

i18n.setLocaleMessage('ru_RU', require('@/lang/ru_RU.json'))
i18n.setLocaleMessage('en_US', require('@/lang/en_US.json'))

export { i18n }

现在我认为让 URL 以区域设置为前缀会更方便，例如 /en/profile 或 /ru/profile。这样我就可以与已经设置好的语言环境共享链接。

但不确定该怎么做。使所有路由成为子路由并放置 /:locale? 并不方便，因为路由器尚未初始化(我同时传递了 i18n 和 router 实例启动根应用程序实例)。

我怎样才能做到这一点，最好的方法是什么？

Answer 1

你可以实现路由器

routes: [{
    path: '/:lang',
    children: [
      {
        path: 'home'
        component: Home
      },
      {
        path: 'about',
        component: About
      },
      {
        path: 'contactus',
        component: ContactUs
      }
    ]
  }]

并在beforeEach钩子(Hook)中设置locale

// use beforeEach route guard to set the language
router.beforeEach((to, from, next) => {

  // use the language from the routing param or default language
  let language = to.params.lang;
  if (!language) {
    language = 'en';
  }

  // set the current language for vuex-i18n. note that translation data
  // for the language might need to be loaded first
  Vue.i18n.set(language);
  next();

});