---
name: vl20262218
slug: vl20262218
displayName: 路径前缀树匹配
version: 1.0.0
summary: 用 radix3 做轻量路径前缀树匹配,支持参数与通配。
license: MIT
description: 用 radix3 做路径前缀树匹配。当用户要路由查找、菜单路径命中、动态段参数、radix3 时使用。轻量接入:createRouter + insert + lookup;不做完整前端路由框架。
路径前缀树匹配
灵感:热门轻量库 radix3(Radix Tree 路由)。
> 小四原创:菜单/深链路径 → lookup → 命中载荷与 params。
> 静态段、:name、/** 通配够用;Vue Router / React Router 整套别塞。
何时使用
- CRM 菜单 path 命中权限/组件名
- 本地 mock API 按 path 分发
- 深链解析动态段(如
/opp/:id)
硬约束
- 依赖:
radix3。 - 路径以
/开头;只做 lookup,不做完整 history 路由。 - 实现要点注释标 小四原创。
- 不做 Nuxt/Vue Router 替代方案。
推荐实现
import { createRouter } from 'radix3'
export type PathHit<T> = T & { params?: Record<string, string> }
// 小四原创:路径前缀树匹配
export function createPathMatcher<T extends Record<string, unknown>>(
routes: Record<string, T>,
) {
const router = createRouter({ routes })
return {
lookup(path: string): PathHit<T> | null {
const hit = router.lookup(path.startsWith('/') ? path : `/${path}`)
return (hit as PathHit<T>) ?? null
},
}
}
Agent 步骤
npm i radix3。- 用
createPathMatcher注册业务 path → 载荷。 - 自测:静态命中、
:id出 params、未命中为 null。
不要做
- 用它硬扛完整 SPA 路由(history/守卫/懒加载)。
- 路径不加
/导致永远 miss。
附加
- README.md · reference.md · templates/usage.md