Angular路由中能否使用斜杠实现类似子文件夹的URL结构？

Angular完全支持多级带斜杠的URL路径，不需要强制使用一级路径形式，你遇到的问题是路由配置结构错误和routerLink用法不规范导致的。

问题原因分析 #

• 路由配置层级错误：你当前的配置里，users、groups、roles是同级路由，都挂载在根空路径的子路由下，实际访问路径是/users、/groups，不存在/users/groups这类二级路径
• routerLink绑定语法错误：<a [routerLink]="users/users">Users</a>中，方括号绑定会将内容当做TS表达式解析，users/users会被识别为两个变量做除法运算，变量未定义时运算结果就是NaN，这就是你看到异常路径的原因

正确实现方案 #

第一步：调整路由配置结构 #

要实现/users/xxx的二级路径，需要把groups、roles等路由配置为users路由的子路由，同时可以补充index路径作为/users的默认子路由：

Shell.childRoutes([
  {
    path: '', 
    component: IndexComponent, 
    data: { roles: ['Administrator'] },
    children: [
      { 
        path: 'users', 
        // 若users路由有公共布局保留该配置，无公共布局可删除component直接写children
        component: UsersComponent, 
        data: { roles: ['Administrator'] },
        children: [
          // 对应路径 /users/index
          { path: 'index', component: UsersIndexComponent, data: { roles: ['Administrator'] } },
          // 对应路径 /users/groups
          { path: 'groups', component: GroupsComponent, data: { roles: ['Administrator'] } },
          // 对应路径 /users/roles
          { path: 'roles', component: RolesComponent, data: { roles: ['Administrator'] } },
          // 可选配置：访问/users时自动跳转到/users/index
          { path: '', redirectTo: 'index', pathMatch: 'full' }
        ]
      }
    ]
  }
])

注意：如果为users路由配置了component，需要在对应UsersComponent的模板中添加<router-outlet></router-outlet>标签，子路由的内容才会正常渲染。

第二步：修正routerLink写法 #

routerLink有两种合法写法：

1. 静态字符串形式（不需要方括号绑定，直接写属性值）：

<a routerLink="/users/index">用户首页</a>
<a routerLink="/users/groups">用户组</a>

2. 数组形式（方括号绑定，适合动态拼接路径场景）：

<a [routerLink]="['/users', 'groups']">用户组</a>

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