'Vue Router Optional Parameter on Parent Doesn't Render Child

I have the following setup in my vue router (v4.0.13):

const routes = [
  {
    path: "/:lang(en|fr)?",
    component: Layout, //Top-level component that contains the basic elements (sidebar, header, footer).
    children: [
      {
        path: "",
        name: "Home",
        component: Home,
      },
      {
        path: "other",
        name: "Other",
        component: Other,
      },
    ],
  },
];

with Layout, Home, Other being my components. The problem is that the following routes don't render the Home component:

/ or /en.

If I remove the ? and make the parameter non optional then /en renders the Home component correctly but the / route doesn't work anymore.

What am I missing?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source