URLPattern 怎样匹配带参数的前端路由

如果前端只需要判断一个 URL 是否符合 /users/:id 这类模式，并取出其中的 id，可以直接使用 URLPattern：用命名段声明参数，用 test() 做布尔判断，用 exec() 读取匹配结果。它负责 URL 模式匹配，不负责页面渲染、导航跳转或状态管理。

官方地址：https://developer.mozilla.org/en-US/docs/Web/API/URLPattern

最实用的分工是：test() 只回答“是否命中”，exec() 才负责“命中了什么”。带参数的 pathname 写成命名段后，从 pathname.groups 取值即可。

先拆出路由匹配责任

手写前端路由匹配时，常见问题是把路径切成数组后再自己处理斜杠、可选段和参数名。URLPattern 的思路更直接：模式可以针对 URL 的不同组件描述规则，pathname 只负责路径部分，查询字符串、主机名和协议可以单独声明。

因此，/users/:id 中的 /users/ 是固定路径，:id 是命名捕获段；?tab=posts 是否参与匹配，则是 search 组件的另一个决策。先把这几个责任分开，后面才不会把查询参数误当成 pathname 参数。

声明带参数的 pathname

构造 URLPattern 时，可以把对象作为模式描述，并明确写出 pathname。对于路由判断，先调用 test() 是最小闭环：它只返回布尔值，适合在多个候选路由中快速筛选。

const userRoute = new URLPattern({
  // 固定的 users 段后面接一个命名参数 id。
  pathname: "/users/:id"
});

const matched = userRoute.test("https://example.com/users/42");
// matched 为 true；test() 只负责判断，不返回参数对象。
console.log(matched);

这里的模式没有绑定具体域名，所以测试 URL 可以使用任意主机；如果业务只允许某个站点，也可以把 baseURL 或 hostname 一并纳入模式。不要因为 test() 返回 true 就假定已经拿到了 id，布尔结果本身没有参数。

用 exec() 读取参数

需要把路由参数交给页面处理器时，改用 exec()。命中时它返回包含各 URL 组件的结果对象，命名 pathname 捕获段位于 result.pathname.groups；未命中时返回 null，所以先判断结果再取值。

function matchUserRoute(input) {
  // exec() 可能返回 null，先保存结果再判断，避免直接读取空值。
  const result = userRoute.exec(input);
  if (!result) {
    return null;
  }

  // 命名捕获段 id 位于 pathname.groups，保持参数来源清晰。
  const id = result.pathname.groups.id;
  return { id };
}

const routeParams = matchUserRoute("https://example.com/users/42");
// routeParams.id 为 "42"；URL 路径参数应按字符串处理，再由业务决定是否转数字。
console.log(routeParams?.id);

参数值来自 URL，默认应先当作字符串处理。若页面需要数字 ID，再在业务层显式转换并处理转换失败；不要把匹配器顺手变成数据校验器。命名捕获的好处是代码不依赖数组下标，模式稍微调整后仍能读到明确的字段名。

处理 baseURL、查询字符串与兼容边界

如果模式写成相对形式，构造器可以配合基础 URL 解析；如果直接传入完整 URL，则可以同时约束协议、主机和路径。查询字符串并不会自动变成 pathname 的一部分，确实需要限制 ?tab=posts 时，应单独声明 search，或者把查询读取交给后续业务。

const postRoute = new URLPattern(
  {
    // 只把 tab=posts 作为查询组件规则，路径参数仍由 pathname 管理。
    pathname: "/users/:id",
    search: "?tab=posts"
  },
  "https://example.com"
);

// 先判断完整 URL 是否命中，避免页面处理器接收错误路由。
const postMatch = postRoute.exec("https://example.com/users/42?tab=posts");
console.log(postMatch?.pathname.groups.id);

还要注意运行时支持：MDN 将 URLPattern 标记为较新的 Web API，较旧设备或浏览器可能不支持。生产代码可以在启动或路由初始化处做特性检测，再选择兼容实现或回退到项目已有路由器；不要把“浏览器支持 URL”误认为“浏览器支持 URLPattern”。

常见问题

test() 和 exec() 应该怎么选？

只需要判断当前 URL 属于哪个路由时用 test()；需要把命名参数交给页面逻辑时用 exec()。后者要处理未命中的 null。

为什么 pathname.groups.id 可能是 undefined？

通常是模式没有写命名捕获段、名称拼写不一致，或者读取的不是 pathname 组件。先检查 pathname 模式，再确认代码使用了同名字段。

URLPattern 能替代完整前端路由库吗？

不能直接这样理解。它提供 URL 模式匹配和捕获结果，导航历史、嵌套路由、懒加载、页面生命周期等仍然需要路由器或业务代码负责。

小结

URLPattern 的核心用法可以压缩成三步：把固定路径和命名参数写进 pathname，用 test() 判断是否命中，需要参数时改用 exec() 并读取 pathname.groups。再把查询字符串、基础 URL 和兼容检测放在各自的责任边界内，轻量路由匹配就不会和页面业务纠缠在一起。