如何在Angular中实现路径参数式详情视图URL？

要让导航生成locations/details/1001这种路径参数格式的URL，只需修改导航代码的传参方式，同时修正路径拼写和路由配置保持一致：

修改导航代码 #

原代码用queryParams生成查询参数，现在需要把locationId作为路由路径的一部分传入：

原导航代码：

this.router.navigate(['/location/details'], { queryParams: { id: locationId } });

修改后的导航代码：

this.router.navigate(['/locations/details', locationId]);

关键说明 #

1. 路由配置中的path: "locations/details/:id"定义了路径参数id，因此导航时要将参数值追加到路由路径数组的末尾，而非放在queryParams中。
2. 原导航代码里的路径/location/details少了一个s，和路由配置的locations不匹配，修正后才能正确匹配路由规则。

路由配置保持不变 #

你的现有路由配置无需修改：

{ path: "locations/details/:id", component: LocationDetailsComponent, canActivate: [AuthGuard] }

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