Vue Router 4同名路由覆盖问题：/admin/gallery路由无法加载

问题根源 #

你遇到的问题主要来自两个点：

1. 路由名称重复：你同时给/admin/gallery子路由和/gallery/:id根路由设置了相同的name: "gallery"，Vue Router中路由名称是唯一标识，后定义的路由会覆盖先定义的同名路由记录，直接导致路由匹配异常。
2. 路由匹配顺序的放大效应：Vue Router按路由数组的定义顺序从上到下匹配路径。当/admin路由在前时，子路由gallery先被定义，随后被后面的/gallery/:id路由的同名记录覆盖，访问/admin/gallery时找不到正确的路由配置；而把/gallery/:id移到前面时，子路由gallery后定义会覆盖根路由的同名记录，此时访问/admin/gallery就能匹配到正确的子路由。

解决步骤 #

1. 修改路由名称，保证唯一 #

给两个路由设置不同的name，彻底解决同名覆盖问题：

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: "admin-gallery", // 修改为唯一名称
        meta: {
          title: "Galerie Administration",
          enforceLogin: true,
        },
        component: () => import("@/views/admin/GalleryAdministration.vue"),
      },
    ],
  },
  {
    path: "/gallery/:id",
    name: "gallery-detail", // 修改为唯一名称
    meta: {
      title: "Galerie",
    },
    component: () => import("@/views/GalleryView.vue"),
  },
];

export default routes;

2. （可选）调整路由顺序，遵循精准优先逻辑 #

修改名称后顺序不再影响功能，但建议把精准匹配的路由（比如/admin及其子路由）放在动态路由前面，符合“精准路由优先匹配”的通用逻辑，避免后续新增路由时再次出现类似问题。

验证 #

完成修改后，无论/gallery/:id放在路由数组的哪个位置，/admin/gallery都能正常加载，动态路由/gallery/:id也能正常工作。

内容的提问来源于stack exchange，提问作者Nevah5