Vue Router 4 path with same name gets overwritten

Question

Currently I have setup a dynamic path for /gallery/:id that works fine. But now the children path of /admin/gallery doesn't load anymore. Only when I remove the dynamic one again.

import { RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: "/admin",
    name: "admin",
    meta: {
      title: "Admin Panel",
      enforceLogin: true,
    },
    redirect: "/admin/welcome",
    component: () => import("@/views/AdminView.vue"),
    children: [
      {
        path: "welcome",
        name: "welcome",
        meta: {
          title: "Admin Panel",
          enforceLogin: true,
        },
        component: () => import("@/views/admin/WelcomeInfo.vue"),
      },
      {
        path: "gallery",
        name: "gallery",
        meta: {
          title: "Galerie Administration",
          enforceLogin: true,
        },
        component: () => import("@/views/admin/GalleryAdministration.vue"),
      },
    ],
  },
  {
    path: "/gallery/:id",
    name: "gallery",
    meta: {
      title: "Galerie",
    },
    component: () => import("@/views/GalleryView.vue"),
  },
];

export default routes;

I've also created a new vue-cli project and tested it there, still doesn't seem to work. I've noticed something weird while testing. If I move the /gallery/:id above the /admin route, the /admin/gallery route works again. So I think the route that comes first, gets overwritten.

How to reproduce

I've created a small guide for reproduction here.

Answer 1

Router path names are unique.

So in my case renaming /admin/gallery to /admin/gallery-managment fixed the issue.