Angular Routing访问含斜杠错误路径未跳转NotFoundComponent问题

你遇到的问题是Angular路由的前缀匹配规则导致的：

• 你配置的path: 'foo'路由没有加pathMatch: 'full'，默认执行前缀匹配
• 访问/foo/test时，Angular路由会优先匹配到前缀为foo的父路由，接着尝试在该路由的children配置中查找匹配test的子路由
• 你既没有给foo路由配置子路由，也没有在FooComponent模板中添加<router-outlet>插槽承载子路由内容，因此最终渲染为空白，不会继续向下匹配全局的**通配符路由

方案1：给无需子路由的顶层路由增加完全匹配规则 #

如果你不需要/foo路径下的任何子路由，直接给foo路由配置pathMatch: 'full'即可：

{ path: 'foo', component: FooComponent, canDeactivate: [DeactivateGuard], pathMatch: 'full' },

该配置要求只有路径完全等于/foo时才会匹配该路由，访问/foo/test时不会命中该路由，会继续向下匹配到全局的**通配符路由，正常渲染NotFoundComponent。

方案2：为父路由配置子层级通配符路由 #

如果你后续需要给foo路由扩展子路由，就在该路由的children配置中增加子层级的404规则：

{ 
  path: 'foo', 
  component: FooComponent, 
  canDeactivate: [DeactivateGuard],
  children: [
    // 你需要的其他子路由配置
    { path: '**', component: NotFoundComponent }
  ]
},

同时记得在FooComponent的模板中添加<router-outlet>标签承载子路由内容。

如果后续还有路由匹配异常，可以临时开启路由调试模式，在控制台查看完整的匹配过程：

imports: [RouterModule.forRoot(routes, { 
  relativeLinkResolution: 'legacy',
  enableTracing: true // 调试完成后可关闭
})],

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