Angular中如何同时配置无路径路由、常规路由与Fallback路由？

你的问题出在无路径路由未设置pathMatch: 'full'，导致它会匹配所有路径的前缀，优先级高于最后的Fallback路由，所以不存在的路径会被导向首页而非404组件。

正确配置方案 #

给首页路由添加pathMatch: 'full'，并确保Fallback路由始终放在路由数组的最后：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full' // 仅当路径完全为"/"时才匹配首页
  },
  {
    path: 'vorgangsarten',
    loadChildren: () => CoolFeatureModule,
  },
  { path: '**', component: PageNotFoundComponent } // 通配符路由必须放在最后
];

关键说明 #

1. pathMatch: 'full'的作用：
   Angular路由默认是前缀匹配，空路径''会匹配任何路径的前缀（比如/abc的前缀是空字符串）。加上pathMatch: 'full'后，只有当URL完全等于/时才会触发首页组件，不会拦截其他路径。

2. Fallback路由的位置：
   通配符路由**会匹配所有未被前面路由匹配到的路径，必须放在路由数组的最后，否则会被前面的路由提前拦截，失去作用。

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