Vue Router同名路由导致路由跳转404的解决方法和避坑指南

// 错误示例：两个路由name均为userDetail，违反唯一性约束
const routes = [
  {
    path: '/user/detail/:id',
    name: 'userDetail', // 先注册的路由，会被后序同名路由覆盖
    component: () => import('@/views/user/Detail.vue'),
    meta: { permission: ['user:view'] }
  },
  {
    path: '/admin/user/detail/:id',
    name: 'userDetail', // 后注册的路由，最终生效
    component: () => import('@/views/admin/UserDetail.vue'),
    meta: { permission: ['admin:user:view'] }
  },
  // 404兜底路由（展示无权限提示，造成误导）
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/404.vue')
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 正确示例：每个路由name唯一，遵循命名规范
const routes = [
  {
    path: '/user/detail/:id',
    name: 'userDetail', // 普通用户模块-详情功能
    component: () => import('@/views/user/Detail.vue'),
    meta: { permission: ['user:view'] }
  },
  {
    path: '/admin/user/detail/:id',
    name: 'adminUserDetail', // 管理员模块-用户详情功能，重命名保证唯一
    component: () => import('@/views/admin/UserDetail.vue'),
    meta: { permission: ['admin:user:view'] }
  },
  // 404兜底路由
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/404.vue')
  }
]

// 新增独立的无权限路由
{
  path: '/no-permission',
  name: 'NoPermission',
  component: () => import('@/views/NoPermission.vue') // 单独的无权限提示页面
},
// 404路由仅提示页面不存在
{
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: () => import('@/views/404.vue') // 纯404提示页面
}

router.beforeEach((to, from, next) => {
  const hasPermission = checkPermission(to.meta.permission) // 自定义权限校验方法
  if (hasPermission) {
    next()
  } else {
    next({ name: 'NoPermission' }) // 无权限重定向到专属页面，而非404
  }
})

/**
 * 校验路由name是否重复，重复则抛出错误
 * @param {Array} routes 路由数组
 */
const checkDuplicateRouteName = (routes) => {
  const nameMap = new Map();
  routes.forEach(route => {
    if (route.name) {
      if (nameMap.has(route.name)) {
        // 打印重复路由的详细路径，方便定位
        console.error(`[Vue Router 错误] 发现同名路由：${route.name}，路径分别为 ${nameMap.get(route.name)} 和 ${route.path}`);
        // 抛出错误，终止路由注册
        throw new Error(`路由名称重复：${route.name}，请检查路由配置！`);
      } else {
        nameMap.set(route.name, route.path);
      }
    }
  });
};

// 注册路由前先执行校验，无重复再创建路由实例
checkDuplicateRouteName(routes);
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 先添加一个命名为about的路由
router.addRoute({ path: '/about', name: 'about', component: About })
// 同名路由会先删除原路由，再添加新路由
router.addRoute({ path: '/other', name: 'about', component: Other })