'Dynamic Routing : Adding nested routes' not working when URL typed on address bar

[YangSeung-min]

When I add nested routes dynamically and then try to access them by typing the URL in the address bar, it does not work. However, the routes work fine when accessed through RouterLink in the code. This issue only occurs with dynamically added nested routes, and there are no problems with static routes.

If there are no problems with my code, then it is probably a library issue. Adding nested routes works fine with Vue2 + Vue Router 3, but there seems to be an issue with Vue3 + Vue Router 4.

static router

const routes = [
  { path: "/", name: "home", component: HomeView },
  { path: "/NoDynamic", name: "NoDynamic", component: NoDynamic },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

dynamic rurter

const newRoutes = [
  {
    path: "/NestedA",
    name: "NestedA",
    component: () => import("@/views/NestedA.vue"),
  },
  {
    path: "/NestedB",
    name: "NestedB",
    component: () => import("@/views/NestedB.vue"),
  },
];

const layout = {
  path: "/Nesting",
  name: "Nesting",
  children: newRoutes,
  component: () => import("@/views/Nesting.vue"),
};
router.addRoute(layout);

Full code with demo :
https://codesandbox.io/p/sandbox/wonderful-violet-55q85o

How to reproduce the issue :

1. click the links on browser (no problem)
2. type '/NoDynamic' at the end of URL in address bar and go to 'NoDynamic' page (no problem)
3. type '/NestedA' or '/NestedB' at the end of URL on address bar (problem)

Thanks.

[YangSeung-min]

Closing and moving it to the issue.