VueJS + vue-i18n маршрутизация - PullRequest
Новая
       1

VueJS + vue-i18n маршрутизация

0 голосов
/ 13 мая 2019

Не могу понять, как настроить маршрутизацию и почему текущая конфигурация не работает.

Что я пытаюсь выполнить:

Структура URL: 

http://example.com/en
http://example.com/en/about-us
http://example.com/en/sample-page

http://example.com/fr
http://example.com/fr/about-us
http://example.com/fr/sample-page

Для правильного перенаправления я настраиваю beforeEach: 

router.beforeEach((to, from, next) => {
  const lang = to.params.lang;

  if ( !['en','fr'].includes(lang) ) {
    return next('en');
  }

  if ( i18n.locale !== lang ) {
    i18n.locale = lang;
  }

  return next();
});

А вот часть, которую я не понимаю, почему она не работает, , почему домашний компонент вообще не загружается .

router.js 

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/:lang',
      children: [
        {
          path: '',
          name: 'home',
          component: Home,
        }
      ],
    },
  ],
})

Переключение языка (локали) работает нормально.

1 Ответ

1 голос
/ 13 мая 2019

Вам необходим компонент для рендеринга маршрута /:lang. Вы можете создать файл и добавить <router-view/> внутри или создать анонимный компонент, такой как: 

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/:lang',
      component: {
        render: h => h('router-view')
      },
      children: [
        {
          path: '',
          name: 'home',
          component: Home,
        }
      ],
    },
  ],
})
...