Как добавить префикс локали i18n в маршрутизаторе Vue для всех локалей, кроме версии по умолчанию? - PullRequest
Новая
       35

Как добавить префикс локали i18n в маршрутизаторе Vue для всех локалей, кроме версии по умолчанию?

1 голос
/ 04 октября 2019

Я пытаюсь создать маршрут, чтобы добавить префикс локали для всех маршрутов, я получил его, используя этот код: 

routes: [{
  path: '/:lang',
  component: {
    template: '<router-view />'
  },
  children: [
    {
      path: '',
      name: 'home',
      component: Home
    },
    {
      path: 'about',
      name: 'about',
      component: About
    },
    {
      path: 'contact',
      name: 'contact',
      component: Contact
    }
  ]
}]

Для локали по умолчанию en Я не хочучтобы установить этот префикс так, чтобы params.lang был в этом случае полным путем, а не кодом локали, поэтому при запросе любого пути без кода локали будет отображаться соответствующий компонент Home.

Так какя могу сделать это? Помогает ли в этом случае навигационная охрана типа beforeEnter?

1 Ответ

1 голос
/ 05 октября 2019

На самом деле вы можете сделать это без охраны навигации. Основная цель здесь - дать понять маршрутизатору, когда у вас есть URL без параметра :lang. Чтобы различать языковые префиксы и фактические пути, вы можете использовать шаблон регулярного выражения для параметра :lang, например: (de|fr|en|zu) (любой список кодов, который вам подходит). И сделать :lang необязательным ?.

Так что-то вроде этого должно работать: path: '/:lang(de|fr|en|zu)?' По крайней мере, это работает для меня :) ...

Так что теперь, есливы запрашиваете /about или /de/about, которые оба будут соответствовать About .. однако первый из них будет иметь params.lang === undefined. Поэтому я думаю, что когда бы вы ни указали свою локаль, вы можете сделать: const locale = this.$route.params.lang || 'en'

вот документация для расширенных шаблонов соответствия 

routes: [{
  path: '/:lang(de|fr|en|zu)?',
  component: {
    template: '<router-view />'
  },
  children: [
    {
      path: '',
      name: 'home',
      component: Home
    },
    {
      path: 'about',
      name: 'about',
      component: About
    },
    {
      path: 'contact',
      name: 'contact',
      component: Contact
    }
  ]
}]
...