[Vuejs]-I18n locale change in url and nested routes

by

0👍

Okay, after hours and hours of testing I think I found a solution with the correct structure. What I was missing was an empty component with for my dynamic language route.


const routes = [
  {
    path: "/",
    beforeEnter(to, from, next) {
      next(i18n.locale + "/step");
    },
    component: App
  },

  {
    path: "/:lang",
    component: { template: "<router-view />" },
    beforeEnter(to, from, next) {
      let lang = to.params.lang;
      if (supportedLangs.includes(lang)) {
        if (i18n.locale !== lang) {
          i18n.locale = lang;
        }
        return next();
      }
      return next(i18n.locale);
    },
    children: [
      {
        path: "step",
        redirect: "step/1",
        name: "Start",
        component: Steps,
        children: [
          {
            path: "1",
            name: "step1",
            component: Step1
          },
          {
            path: "2",
            name: "step2",
            component: Step2
          },
          {
            path: "3",
            name: "step3",
            component: Step3
          }
        ]
      },
      {
        path: "join",
        name: "join",
        component: Join
      },
      {
        path: "success",
        name: "success",
        component: Success
      }
    ]
  }
];

Here is the working version codesandbox. No clue WHY exactly it’s needed but it made my project work the way I needed so I won’t question the universe for now 😛

Leave a comment