路径前缀树匹配
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_f1b049da/vl20262218。
技能介绍
要解决的问题
在路由查找、菜单权限、深链解析这类场景里,我们常常只需要一件事:把一段路径字符串映射到对应的载荷和参数,而不是一整套前端路由框架。完整路由库动辄引入 history 管理、导航守卫、懒加载等能力,对菜单命中、mock 分发这类轻量需求来说过重。路径前缀树匹配技能正是为了这个缺口而来。
核心能力与工作方式
技能以 radix3 为基础,提供轻量路径前缀树匹配,核心 API 只有三个:createRouter、insert、lookup。
- 静态段匹配:
/users/list这类固定路径直接命中 - 动态段参数:
/opp/:id命中时抽取参数,结果里带着params - 通配匹配:
/**兜底深层路径
推荐接入流程:
- 用
createPathMatcher注册业务 path → 载荷映射 - 调用
lookup得到命中载荷与 params,未命中返回null - 自测覆盖三类场景:静态命中、
:id出参数、未命中
适用边界
技能刻意保持克制:
- 路径必须以
/开头,否则永远 miss - 只做 lookup,不做 history 路由、守卫、懒加载
- 不是 Vue Router / React Router 的替代品
- 灵感来自 radix3 的 radix tree 路由,定位是菜单/深链路径 →
lookup→ 命中载荷
如果你的需求是完整 SPA 路由,请回到成熟路由框架;如果只是把路径字符串可靠映射到业务对象,这个技能刚好。
使用场景
- 开发 CRM 系统时,需根据路由路径快速匹配菜单权限标识与组件名,并提取动态段 ID。
- 编写前端 mock 服务时,需将接口 URL 注入前缀树,实现请求路径到预设数据的快速分发。
- 处理 App 深链跳转时,需解析 /opp/:id 形式的动态路径,将其映射为业务对象并提取参数。
适合人员
- 前端工程师,需要为中型应用编写轻量级路径分发逻辑,但又不想引入庞大路由框架。
- 全栈开发者,正在搭建本地 mock 服务,需要根据 URL 路径精准返回模拟 JSON 数据。
- 移动端工程师,负责处理 H5 或小程序深链跳转,需要快速解析带参路径并映射业务逻辑。