文章内容
2019/7/29 10:37:10,作 者: 黄兵
Angular子路由相关问题
最近在配置子路由的时候一直无法很好的匹配，昨天下午研究了一段时间，将一些问题总结和记录如下。
const routes: Routes = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{path: 'Account', loadChildren: './account/account.module#AccountModule'},
{path: 'resources', loadChildren: './resources/resources.module#ResourcesModule'},
{path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule'},
{path: 'private_number/:id', loadChildren: './private_number/private_number.module#PrivateNumberModule'},
{path: 'private_number/purchase/:id', loadChildren: './private_number/purchase/purchase.module#PurchaseModule'},
{path: 'cart', loadChildren: './cart/cart.module#CartModule'}
];这里定义了一组路由，其中loadChildren是启用懒加载，只有在访问这个uri的时候才加载，使用懒加载有如下好处：
使用模块将我们的应用的相关功能分组的另一个优点是能够按需加载那些片段。
延迟加载模块有助于减少启动时间。
通过延迟加载，我们的应用程序不需要立即加载所有内容，它只需要加载用户期望第一次加载时看到的内容。
延迟加载的模块只会在用户导航到其路由时加载。
子路由如下写法：
const routes: Routes = [
{path: '', component: CartComponent, canActivate: [AuthGuard]},
{path: 'pay_result', component: PayResultComponent, pathMatch: 'full'},
];首先如果访问：http://localhost:4200/cart，匹配的是懒加载内容：
{path: 'cart', loadChildren: './cart/cart.module#CartModule'}通过路由定义，渲染CartComponent这个组件。同时定义了一个拦截器，主要是实现登陆可访问。
同时定义了子路由pay_result，uri是：http://localhost:4200/cart/pay_result
使用的是全匹配模式。
参考资料：
1、延迟加载模块
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - Angular子路由相关问题
评论列表