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

[YangSeung-min]

Reproduction

https://codesandbox.io/p/sandbox/wonderful-violet-55q85o

Steps to reproduce the bug

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 then expected pages do not appear.(problem)

Expected behavior

I can move to the the dynamically added nested routes by typing the URL in the address bar.

Actual behavior

does not work.

Additional information

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);

Thanks.

[posva]

You need to push after adding routes https://router.vuejs.org/guide/advanced/dynamic-routing.html

[YangSeung-min]

@posva Thank you for your comment. It seems like your answer explains how to move to a new route programmatically. However, the issue I posted is that we are unable to access a new nested route by typing the URL into the address bar.

[renartius]

I have the same problem, and it occurs when the page is refreshed

[wd-zhang]

I also have this problem and my vue-router version is 4.2.2.
Another problem associated with is router.options.routes will not refresh when I use addRoute() inside navigation guards router.beforeEach to add nested routes.