Angular中如何使用相对路由修改URL路径中的页码参数

你之前的写法报错的核心原因是：已经将relativeTo指定为当前路由的父级（对应/videos路径段），再加../会回退到/videos的上一级路径，最终生成的路径无法匹配现有路由规则，因此抛出错误。

以下是两种可直接使用的实现方案：

方案1：调整相对路径层级（最简写法） #

既然定位到了/videos对应的父路由层级，直接传入目标页码即可，不需要额外的回退层级：

// 当前处于 /videos/5 路由下，pageNumber=3时跳转后路径为 /videos/3
this.router.navigate([pageNumber], { relativeTo: this.activatedRoute.parent });

适用场景：路由配置为videos/:page平级结构，或者videos为父路由、:page为子路由的嵌套结构。

方案2：通用无依赖写法（无需硬编码任何路径） #

如果不想绑定路由嵌套结构，可以直接提取当前URL的路径段，替换最后一段的页码即可，适配任意前缀路径：

// 截取除最后一段页码外的所有路径段，拼接新页码
const pathSegments = this.activatedRoute.snapshot.url.slice(0, -1).map(item => item.path);
this.router.navigate([...pathSegments, pageNumber]);

适用场景：所有将页码作为路径最后一段的路由场景，不需要提前知道前缀路径的具体内容。

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