Angular路由含多个路径中间参数时如何通过navigate方法编程跳转

错误原因 #

你当前的写法不符合Angular路由API的调用规则：this.router.navigate() 方法接收的数组参数要求每一个路径段、路由参数都作为独立的数组项，不能直接传入带有:param占位符的完整路径字符串。
你原有的写法会把app/:foo/article/edit/:id当成一个完整路径段进行转义，最终生成的路径为app%2F%3Afoo%2Farticle%2Fedit%2F%3Aid/1/3，无法匹配你定义的路由规则。

解决方案 #

针对你需要在Route Guard中动态切换不同路由的场景，有两种常用的实现方式：

方式1：拆分路径段的标准写法 #

把路由路径按/拆分，将动态参数直接插入对应位置即可：

// 示例中foo参数值为1，id参数值为3
this.router.navigate(['app', 1, 'article', 'edit', 3]);

如果要切换到另一个路由，修改对应静态路径段即可：

this.router.navigate(['app', 1, 'material', 'wareneingang', 'edit', 3]);

方式2：动态替换占位符后跳转 #

如果你的路由模板是提前动态生成的字符串，可以先统一替换占位符，再调用navigateByUrl跳转，该方式可以复用参数替换逻辑，适配你动态切换路由的需求：

// 可根据Guard逻辑动态切换不同的路由模板
const routeTemplate = 'app/:foo/material/wareneingang/edit/:id';
// 动态参数集合，可根据业务逻辑赋值
const routeParams = { foo: 1, id: 3 };
// 批量替换占位符
const targetUrl = routeTemplate.replace(/:(\w+)/g, (_, key) => routeParams[key]);
// 执行跳转
this.router.navigateByUrl(targetUrl);

不需要手动拼接完整路径，用上述两种方式都可以实现需求。

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