Question

我有一个主app.routing.module.ts：

 const routes: Routes = [
  { path: 'home',  component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

然后是几个子路由模块：

const routes: Routes = [
    { path: 'AbcRoute1', component: AbcRoute1Component },
    { path: 'AbcRoute2', component: AbcRoute2Component }
];

@NgModule({
    imports: [ RouterModule.forChild(routes) ],
    exports: [ RouterModule ]
})
export class AbcRoutingModule {}

const routes: Routes = [
    { path: 'DefRoute1', component: DefRoute1Component },
    { path: 'DefRoute2', component: DefRoute2Component }
];

@NgModule({
    imports: [ RouterModule.forChild(routes) ],
    exports: [ RouterModule ]
})
export class DefRoutingModule {}

我指的是捕捉所有路线：

{ path: '**', redirectTo: '/home', pathMatch: 'full' }

如果我把它放在AppRoutingModule中，那么如果它不匹配AppRoutingModule中定义的任何路线，它就会启动。例如，我无法转到https://myapp/DefRoute1

中定义的DefRoutingModule

如果我把它放在AbcRoutingModule中，那么所有本地路线都有用，但DefRoutingModule中的内容无法正常工作。

如果我的所有路由模块都与网址不匹配，我该把它放在哪里才会匹配？

Answer 1

确保在模块导入中最后声明rle（根路由模块）。然后在那里声明catch所有通配符。文档链接：https://angular.io/guide/router#routing-module-order

AppRoutingModule

在哪里声明Angular catch all（Not found）route

1 个答案: