VueJS + routage vue-i18n

Question

Je n'arrive pas à comprendre comment mettre en place le routage et pourquoi la configuration actuelle ne fonctionne pas.

Ce que j'essaie d'accomplir :

Structure de l'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

Pour gérer une redirection correcte, j'ai configuré 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();
});

Et voici la partie que je ne comprends pas, pourquoi cela ne fonctionne pas, Pourquoi le composant Home ne se charge-t-il pas du tout ? .

router.js

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

Le changement de langue (locale) fonctionne correctement.

Answer 1

Vous avez besoin d'un composant pour rendre la route /:lang . Vous pouvez créer un fichier et ajouter <router-view/> ou créer un composant anonyme comme :

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,
        }
      ],
    },
  ],
})