前端 URLPattern 怎么匹配带参数的路由：命名捕获、校验失败与降级处理

商品详情页的路由通常长这样：/products/sku-2048?from=search。如果只用 split('/') 取第三段，遇到尾部斜杠、查询参数或 URL 编码，判断逻辑很快会散落到多个组件里。URLPattern 可以把“路径是否符合规则”和“参数取什么值”放在一条声明里，但它不是所有浏览器都能直接调用，test()、exec() 和降级分支也要分清。

实际项目里可以先用 URLPattern 描述稳定的路由边界，再用 test() 做快速判断、用 exec() 读取命名参数；构造失败或浏览器没有该 API 时，保留一条明确的手写降级路径。

先把路由规则和选择标准摆清楚

这里比较三种常见写法：直接切字符串、正则表达式、URLPattern。字符串切分没有额外能力检测，但会自己处理编码和可选段；正则表达式灵活，却容易把完整 URL、路径和查询串混在一起；URLPattern 按 protocol、hostname、pathname、search、hash 分组件匹配，命名参数也能直接落到结果对象。

如果路由是多段 URL、需要同时约束主机名，或者团队已经接受现代浏览器 API，优先考虑 URLPattern。只在一个固定内部页面取一段字符串时，没必要为了“新 API”增加兼容代码。

用命名捕获匹配商品详情页

先把规则限制在商品详情页，并要求 SKU 是数字。URLPattern 的命名组使用冒号开头；括号中的表达式用于收紧这一段的取值范围。

const productRoute = new URLPattern({
  pathname: '/products/:sku(\\d+)'
}, 'https://shop.example.com');

const url = 'https://shop.example.com/products/2048?from=search';
console.log(productRoute.test(url)); // true

const match = productRoute.exec(url);
console.log(match.pathname.groups.sku); // '2048'
console.log(match.search.input);         // '?from=search'

这里的关键不是“正则更强”，而是结果按 URL 组件组织：match.pathname.groups.sku 明确说明参数来自路径。查询串仍在 match.search.input，不会被误认为 SKU 的一部分。

什么时候用 test，什么时候必须用 exec

导航守卫只需要决定是否进入某个页面时，用 test() 足够；渲染商品详情、加载数据或生成面包屑时，需要参数，就应该用 exec()。不要先 test() 再 exec()，那会把同一个 URL 解析两遍。

function resolveProduct(url) {
  const result = productRoute.exec(url);
  if (!result) return null;

  return {
    sku: result.pathname.groups.sku,
    source: new URLSearchParams(result.search.input).get('from')
  };
}

console.log(resolveProduct(url));
// { sku: '2048', source: 'search' }

不匹配时，exec() 返回 null，不是一个空的 groups 对象。路由层应在这里结束，别继续读取 result.pathname，否则错误会从“404 路由”变成无关的 TypeError。

相对 URL 与组件输入的两个边界

应用内部经常只有 /products/2048 这样的相对路径。可以把站点根地址作为第二个参数传给字符串形式的 test() 或 exec()：

const relative = productRoute.exec(
  '/products/2048',
  'https://shop.example.com/catalog'
);
console.log(relative.pathname.groups.sku); // '2048'

另一种是对象输入，把 pathname 与 baseURL 放在同一个对象里。两种形式选一种即可；规范明确不允许对象输入后再额外传第二个 base URL。若调用参数混搭，会直接抛异常，不是返回 false。

const ok = productRoute.test({
  pathname: '/products/2048',
  baseURL: 'https://shop.example.com'
});
console.log(ok); // true

浏览器不支持时怎么保留可控降级

URLPattern 的构造函数缺失时，不要等用户点击后才报错。把能力检测放在路由模块初始化处，并让降级函数只接收 pathname，避免重新发明一套完整 URL 解析器。

function fallbackProduct(pathname) {
  const found = pathname.match(/^\\/products\\/(\\d+)\\/?$/);
  return found ? { sku: found[1] } : null;
}

function resolveProductRoute(pathname) {
  if (typeof URLPattern === 'function') {
    const result = productRoute.exec(pathname, 'https://shop.example.com');
    return result ? { sku: result.pathname.groups.sku } : null;
  }
  return fallbackProduct(pathname);
}

降级只覆盖同一条业务边界：数字 SKU 和可选尾斜杠。它不需要模拟 URLPattern 的每一个组件能力。以后如果规则增加主机名或查询条件，应先补降级测试，再扩大这段正则。

三组验收用例决定是否值得上线

const cases = [
  ['/products/2048', true],
  ['/products/2048/', true],
  ['/products/abc', false]
];

for (const [pathname, expected] of cases) {
  const actual = resolveProductRoute(pathname) !== null;
  console.log(pathname, actual === expected ? 'PASS' : 'FAIL');
}

至少验证一个正常参数、一个边界形式和一个应该拒绝的输入。浏览器兼容矩阵还要单独跑一次：支持 URLPattern 的环境检查命名组结果，不支持的环境检查降级结果，两边都应得到相同的 SKU。

常见问题

URLPattern 能替代所有前端路由库吗？

不能。它只负责 URL 模式匹配和捕获，不负责历史栈、导航、数据加载、嵌套路由或权限守卫。

命名组取不到值时该看哪里？

先确认访问的是 result.pathname.groups，而不是整个结果对象；再检查命名组写在 pathname 规则里，且输入确实匹配。

为什么 exec 返回 null 而不是抛异常？

普通不匹配是预期分支，所以返回 null；只有规则构造非法或输入参数形式冲突时，才应按异常处理。

旧浏览器降级要不要完整复制 URLPattern？

不需要。围绕业务真正使用的边界写最小降级，并用同一组验收用例约束两条路径即可。

把路由规则留在一处

URLPattern 的价值在于让“哪些 URL 属于这个页面”变成可读、可测试的契约。项目接入时，先决定匹配范围，再决定是否读取参数，最后补上能力检测和最小降级；当三组边界用例在两条路径都通过，才算完成这次路由改造。