Angular路由：含参数路由与嵌套子路由的区别及问题排查

• 第一种是同级独立路由：/users和/users/:id是平级的路由规则，访问这两个路径时，Angular会将根路由出口(<router-outlet>)里的组件完全替换——访问/users显示UsersListComponent，访问/users/:id则直接替换为EditUserComponent。
• 第二种是父子嵌套路由：/users作为父路由，:id是它的子路由。此时访问/users/:id时，Angular会先渲染父组件UsersListComponent，再将子组件EditUserComponent渲染到父组件内部的子路由出口中。

你访问/users/123时只看到UsersListComponent，核心问题是父组件里没有添加子路由的出口：
父子路由的工作逻辑是父组件先渲染，子组件需要在父组件的模板中通过<router-outlet></router-outlet>来承载。如果UsersListComponent的模板里没有这个标签，Angular找不到子组件的渲染位置，自然只会显示父组件的内容。

没有绝对的“正确”，取决于你的业务需求：

• 如果希望用户列表页和编辑页是完全独立的两个页面（访问编辑页时完全替换列表页），第一种同级路由的配置更直接，也是你当前验证过能正常工作的方案。
• 如果需要在同一个页面同时展示列表和编辑内容（比如左侧列表、右侧编辑区域），那第二种父子路由配置是合适的，但必须给UsersListComponent的模板添加<router-outlet>标签，让子组件能正确渲染。

比如修改UsersListComponent的模板：

<!-- 用户列表内容 -->
<div class="user-list">...</div>

<!-- 子路由出口，用于渲染EditUserComponent -->
<router-outlet></router-outlet>

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