Angular命名路由Outlet无法正常路由跳转问题排查

问题出在命名路由出口的routerLink写法错误。你的路由b是绑定到命名出口b的，但直接写routerLink="b"会让Angular在默认路由出口中匹配路径b，而你的路由配置里默认出口并没有path: 'b'的规则，所以报错。

正确写法 #

修改app.component.html中第二个按钮的routerLink，使用Angular命名路由的语法：

<button routerLink="a">router link a</button>
<button [routerLink]="[{ outlets: { b: ['b'] } }]">router link b</button>

原理说明 #

• [{ outlets: { b: ['b'] } }]是Angular针对命名路由的标准写法：
  • outlets对象指定要操作的目标路由出口
  • 键b对应你定义的命名路由出口名称
  • 值['b']对应路由配置中该出口下的路径规则

修改后点击第二个按钮，Angular会正确匹配到命名出口b下的路由规则，加载对应的HelloComponent。

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