Implementing language switcher and have this last (hope so) missing puzzle.

I have these routes defined:

routes: [
    {
      path: '/',
      redirect: `/en`,
    },
    {
      path: '/:lang',
      component: {
        render: h => h('router-view')
      },
      children: [
        {
          path: '',
          name: 'home',
          component: Home,
        },
      ],
    },
  ],

And I have some routes coming from backend, I adding these routes to existing like this:

fetchRoutes({commit}) {
      axios.get( `${process.env.VUE_APP_API_DOMAIN}/wp-json/api/v1/routes/`).then( r => r.data ).then(routes => {

        routes.forEach( (route) => {
          router.addRoutes([
            {
              path: `${route.path}`,
              name: `${route.path}`,
              component: () => import(/* webpackChunkName: 'pages' */ `./views/${route.component}.vue`),
              props: route.props,
            },
          ]);
        } );

      });
    },

This is fine for non-children routes. But I need to put these routes under path: '/:lang', as children.

0 Answers