Angular 13带参数路由跳转触发404错误的问题排查

嘿，这个问题很典型——你把Angular里两种参数的用法搞混啦，直接导致路由匹配失败出现404。

咱们拆解来看：

• 你的路由配置里path: 'my-path/:my-param'定义的是路径参数，它是URL路径的一部分，正确的URL格式应该是my-path/具体值，参数是嵌在路径里的。
• 但你跳转时用了queryParams: { my-param: 'value' }，这会生成my-path?my-param=value这种带查询参数的URL，和你配置的路由规则完全不匹配，Angular找不到对应的路由，自然就返回404了。

要解决这个问题，只需要把跳转代码改成匹配路径参数的写法就行：

this.router.navigate(['my-path', 'value']);

这样生成的URL是my-path/value，就能精准匹配你定义的路由，不会再出现404啦。

如果你的需求其实是想用查询参数（就是带?的那种），那得修改路由配置，把路径改成path: 'my-path'，然后在组件里通过ActivatedRoute的queryParams Observable来获取参数值——不过看你的路由配置，应该是想用路径参数，所以上面的修改就够了。

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