Vue Router如何判断两个路由是否为"兄弟路由"？

核心结论 #

无需强行获取Vue Router内部的matcher参数键，可通过路由实例自带的matched数组和params直接实现兄弟路由判断，或通过轻量路径解析辅助，稳定性远高于依赖内部API的方案。

具体实现方案 #

方案1：基于路由实例自带属性的稳定判断逻辑 #

每个路由对象的matched数组包含从根到当前路由的所有匹配记录，结合params可直接完成对比，无需依赖内部未暴露的API：

function isSiblingRoute(routeA, routeB) {
  // 1. 路由名称必须一致
  if (routeA.name !== routeB.name) return false;

  // 2. 确保两个路由都存在父路由
  const parentMatchA = routeA.matched[routeA.matched.length - 2];
  const parentMatchB = routeB.matched[routeB.matched.length - 2];
  if (!parentMatchA || !parentMatchB) return false;

  // 3. 父路由的原始路径必须一致（确保是同一个父路由定义）
  if (parentMatchA.path !== parentMatchB.path) return false;

  // 4. 提取父路由的参数键（仅需一行轻量解析）
  const parentParamKeys = parentMatchA.path.match(/:([^/]+)/g)?.map(key => key.slice(1)) || [];

  // 5. 对比所有父路由参数的值是否一致
  return parentParamKeys.every(key => routeA.params[key] === routeB.params[key]);
}

方案2：获取Vue Router内部matcher（不推荐） #

若坚持使用内部已解析的参数键，可通过路由实例的内部属性获取matcher（注意：依赖Vue Router内部实现，版本更新可能失效）：

// 创建路由实例后，尝试获取内部matcher
const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的路由配置 */],
});

// Vue Router 4.x部分版本中，router实例直接暴露matcher属性
const internalMatcher = router.matcher;

// 获取包含keys的路由匹配器列表
const routeMatchers = internalMatcher.getRoutes();
// 找到目标路由的匹配器，获取父路由参数键
const targetMatcher = routeMatchers.find(m => m.record.name === '你的子路由名称');
const parentParamKeys = targetMatcher.parent?.keys.map(k => k.name);

方案推荐 #

优先选择方案1，它不依赖框架内部未公开的API，兼容性和稳定性更强。针对你提到的例子：

• /foo/1/baz/2与/foo/1/baz/3：路由名称相同，父路由参数bar的值均为1，返回true；
• /foo/2/baz/4与前两者：父路由参数bar值为2，与1不等，返回false，完全符合你的需求。

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