前端CRUD路由设计：Todo应用路由冲突的通用解决方法咨询

这个问题在前端路由设计里挺常见的，尤其是当你的待办ID允许是任意字符串（比如用户自定义标题作为ID）的时候。下面给你几个通用的解决思路，以及如果必须添加前缀时的合适词汇参考：

一、通用解决方法 #

1. 给路由参数添加正则约束 #

绝大多数主流前端路由库（React Router、Vue Router、Angular Router）都支持为路由参数设置匹配规则，通过正则表达式限制:id的匹配范围，让它不会捕获像new这类特定字符串。

举几个框架的示例：

• React Router：

  // 加约束后路由顺序不再影响匹配逻辑
  <Route path="/todos/:id(\\d+)" element={<TodoDetail />} />
  <Route path="/todos/new" element={<TodoCreate />} />
  

  如果ID是UUID格式，正则可以换成UUID的匹配规则：^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$

• Vue Router：

  const routes = [
    { path: '/todos/:id(\\d+)', component: TodoDetail },
    { path: '/todos/new', component: TodoCreate }
  ]
  

  这种方式的好处是，既不影响用户创建标题为new的待办，也不需要调整路由顺序，完全靠规则区分匹配逻辑。

2. 遵循RESTful语义调整路由 #

从RESTful设计的角度来说，创建资源的动作对应的是POST /todos接口，前端页面的路由可以对应/todos/create（而不是/todos/new）。这个命名本身就和ID路径不冲突，而且语义清晰，用户一看就知道是创建新待办的页面。

3. 用查询参数区分（备选方案） #

如果不想调整路径结构，可以把创建模式通过查询参数传递，比如跳转到/todos?action=new，然后页面根据action参数渲染创建表单。不过这种方式的语义化不如路径清晰，更适合临时场景或者某些特殊交互需求。

二、必须添加前缀时的合适词汇 #

如果你的待办ID完全是任意字符串（无法用正则约束），必须给详情/编辑路由加前缀的话，推荐这些通用且无歧义的词汇：

• item：比如/todos/item/:id、/todos/item/:id/edit，item是通用的条目指代，简洁清晰，用户能快速理解这是单个待办项的路径。
• detail：比如/todos/detail/:id，比view更准确，直接表明是查看详情页面，没有误导性。
• entry：比如/todos/entry/:id，和item类似，也是通用的条目型资源指代词，适合Todo这类场景。
• todo：比如/todos/todo/:id，虽然看起来有点重复，但语义极其明确，绝对不会让用户产生混淆。

这些前缀的多层结构对用户体验影响很小，因为用户大多是通过页面内的按钮/链接跳转，很少会手动输入完整路由路径。

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