Angular 5技术疑问:无需模块路径段即可导航至模块路由?
问题原因与解决方案
这种情况大概率是你的路由配置没有给Admin模块的路由加上正确的admin前缀,导致Admin模块里的路由直接挂载到了应用的根路径下,所以访问/student/list时会匹配到Admin模块中定义的路由。
我帮你梳理下可能的问题点和对应的解决办法:
1. 主路由配置错误,未给Admin模块指定admin前缀
你的主路由(一般是app-routing.module.ts)里,懒加载Admin模块的路由项可能没有设置path: 'admin',比如错误写法是:
// 错误示例:没有admin前缀,导致Admin模块路由直接挂载到根路径 { path: '', loadChildren: './admin/admin.module#AdminModule' },
正确的写法应该是给Admin模块的路由加上admin前缀,确保只有访问admin/**路径时才加载该模块:
// app-routing.module.ts 正确配置 const routes: Routes = [ { path: 'admin', // 关键:指定前缀为admin loadChildren: './admin/admin.module#AdminModule' // Angular 5的懒加载写法 }, { path: 'prefect', loadChildren: './prefect/prefect.module#PrefectModule' }, // 认证模块处理非admin/prefect的路由 { path: '', loadChildren: './auth/auth.module#AuthModule' }, { path: '**', redirectTo: '' } ];
2. Admin模块内部路由配置未基于前缀做相对路由
如果主路由已经加了admin前缀,但Admin模块的路由配置里直接写了根路径的路由,也会出问题。比如Admin模块的路由(admin-routing.module.ts)错误写法:
// 错误示例:直接定义根路径的student/list const adminRoutes: Routes = [ { path: 'student/list', component: StudentListComponent } ];
正确的做法是把Admin模块的路由嵌套在一个空路径的父路由下,这样所有子路由都会自动继承主路由的admin前缀:
// admin-routing.module.ts 正确配置 const adminRoutes: Routes = [ { path: '', // 对应主路由的admin/,作为Admin模块的根路由 children: [ // 子路由相对admin/,完整路径为admin/student/list { path: 'student/list', component: StudentListComponent }, // 其他Admin模块的子路由都放在这里 ] } ]; @NgModule({ imports: [RouterModule.forChild(adminRoutes)], exports: [RouterModule] }) export class AdminRoutingModule { }
3. 意外将Admin模块直接导入到AppModule
如果你的AppModule里直接导入了AdminModule,而不是仅通过loadChildren懒加载,那么Admin模块的路由会被合并到主路由中,导致根路径下的/student/list也能匹配到。
检查app.module.ts,确保没有类似这样的代码:
// 错误示例:直接导入AdminModule import { AdminModule } from './admin/admin.module'; @NgModule({ imports: [ BrowserModule, AdminModule, // 移除这行,只保留通过loadChildren懒加载 AppRoutingModule ] }) export class AppModule { }
按照上面的步骤调整后,访问/student/list就只会匹配认证模块的路由,而/admin/student/list才会加载Admin模块的StudentListComponent了。
内容的提问来源于stack exchange,提问作者Ludovic Cyril Michel
相关产品推荐
相关产品推荐

