Префикс маршрутов с локалью в vue.js (используя vue-i18n) - PullRequest
Новая
       28

Префикс маршрутов с локалью в vue.js (используя vue-i18n)

0 голосов
/ 14 мая 2018

У меня есть файл 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 одновременно при запуске экземпляра корневого приложения).

Как мне достичь этого, какой будет наилучший подход?

1 Ответ

0 голосов
/ 14 мая 2018

Можно реализовать роутер 

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

и установите locale в beforeEach крюк 

// 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();

});
...