如何防止/:name路由在匹配其他路由或子路径时执行？

要实现你要的效果，核心是让:name路由只匹配「顶级的、未被其他明确路由覆盖的单段路径」，同时不匹配子路径，具体可以按下面的方法来做：

1. 优先放置明确路由 #

你已经把/account放在/:name前面了，这步是对的——不管用什么路由框架（React Router、Express等），路由都是按定义顺序匹配的，前面的明确路由会优先命中，不会走到后面的:name路由。如果之后还有其他明确路由（比如/about、/settings），也要统一放在/:name前面。

2. 限制:name仅匹配顶级单段路径 #

要避免/:name匹配/username/xxx这类子路径，需要给路由加路径深度限制，不同框架的实现方式不同：

举几个常见框架的例子： #

React Router v6+

用end属性可以让路由只匹配当前层级，不会向下匹配子路径：

// 先放明确路由
<Route path="/account" element={<AccountPage />} />
// 加end，只匹配顶级的/xxx，不匹配/xxx/yyy
<Route path="/:name" element={<UserProfile />} end />
// 兜底路由，匹配所有未命中的路径
<Route path="*" element={<NotFoundPage />} />

Express

Express默认是前缀匹配，所以需要用正则来限制只能是单段路径，或者加exact（但exact只能匹配完全一致的路径，适合顶级路由）：

// 先处理明确路由
app.get('/account', (req, res) => {
  res.render('account');
});

// 用正则匹配：开头是/，后面跟着不含/的内容，直到结束
app.get(/^\/[^\/]+$/, (req, res) => {
  const username = req.path.replace('/', '');
  res.render('user-profile', { username });
});

// 兜底路由
app.get('*', (req, res) => {
  res.render('404');
});

Vue Router

用exact属性或者正则约束路径：

const routes = [
  { path: '/account', component: Account },
  // 正则限制只能是单段，不匹配子路径
  { path: '/:name(\\w+)', component: UserProfile },
  { path: '/:pathMatch(.*)*', component: NotFound }
];

3. 额外兜底（可选） #

如果有一些特殊的路径需要排除在:name之外（比如/admin），除了把它们放在前面作为明确路由，也可以在:name的处理逻辑里做判断：
比如在React组件里：

const UserProfile = () => {
  const { name } = useParams();
  // 排除特定关键词
  if (['account', 'admin'].includes(name)) {
    return <Navigate to="/404" />;
  }
  // 正常渲染逻辑
  return <div>Hello {name}</div>;
};

不过这种方法不如直接把明确路由放在前面优雅，因为还是会进入:name的路由逻辑，只是做了跳转。

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