配置了路由表,并定义了子路由,但是每次跳转到子路由总是跳到404路由
在Angular的官方文档找到了原因:导入模块的时候需要注意顺序,我在根模块导入模块时先把主路由模块导入了,导致路由会率先匹配到通配符路由,所以跳转到404,在定义子路由时,要将子路由所在模块提前于通配符路由所在的模块!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32//根模块路由定义在AppRoutingModule,子路由定义在FrontModule中
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
FrontModule,
AppRoutingModule/*导入路由模块,顺序很重要*/
],
......
//AppRoutingModule中的路由表如下
appRoutes: Routes = [
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: 'login', component: LoginComponent},
{path: '**', component: PageNotFoundComponent}
];
//FrontModule中定义的路由表如下
frontRoutes: Routes = [
{
path: 'begin',
component: FrontComponent,
children: [
/*子路由*/
{path: '', component: DebateInfoComponent},
{path: 'end', component: EndComponent},
]
}
];
//如果AppRoutingModule先于FrontModule导入就会导致所有子路由匹配到'**'