Angular 15路由问题：如何实现domain.com/@Username格式的路由？

你可以通过自定义路由参数正则匹配实现这个需求，无需额外添加斜杠。以下是主流框架的具体实现方式：

Vue Router 实现 #

直接在路由参数中指定正则规则，匹配带@前缀的路径，再通过props剥离@符号：

{
  path: "/:username(@.+)", // 正则约束参数必须以@开头
  component: UserComponent,
  props: route => {
    // 去掉@前缀，传递真实用户名给组件
    return { username: route.params.username.slice(1) };
  }
}

配置后访问domain.com/@John，路由会正确匹配，组件接收的username参数为John，URL保持简洁格式。

React Router 实现 #

用正则约束参数格式，通过loader或组件内部处理剥离@：

import { Route } from 'react-router-dom';

<Route
  path="/:username(@.+)"
  element={<UserComponent />}
  loader={({ params }) => {
    const realUsername = params.username.slice(1);
    // 可在此加载用户数据，或传递真实用户名给组件
    return { username: realUsername };
  }}
/>

注意事项 #

• 确保该路由优先级低于其他具体路由（如/about、/settings），避免误匹配非用户页面
• 可根据用户名规则调整正则，比如限制仅允许字母数字：@[a-zA-Z0-9]+

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