1、项目结构决定路由配置
Angular项目如何定义路由?我的一个做法是先确定项目的特性目录,即分清楚各个模块及其子模块,每个模块中的父子组件关系。理清模块(module)、模版(template)、组件(component)。模版提供插口router-outlet用于命中路由之后接入路由指向的页面。路由一般按照module组织,即一个module配一个路由模块(router module)。
比如一个项目有三个模块,首页、购物车、个人中心三个模块。默认页为首页。
根组件中配置一个根路由模块,home指向首页,cart指向购物车,personCenter指向个人中心。默认指向首页。
app模版页面需要安置一个路由出口,用于插放这三个模块中的一个;
home,cart,personCenter该写成组件还是一个module呢?
个人习惯把这三大块写成module,并通过loadChildren把它们懒加载进来。如果规模不大,个人认为也可以把home,cart,personCenter当作三个组件,即这三个组件都在app module。
每个模块中的分析思路也是依据上面的思路进行划分组织。
最终,如果是把首页、购物车、个人中心当作三个模块,链接一般是这样的:
域名/home/xxx,首页模块的路由
域名/cart/xxx,购物车模块路由
2、loadChildren与children
loadChildren是懒加载模块,上例中说的购物车、个人中心等通过loadChildren加载。加载子模块。需要用到的时候再加载出来,不会再初始的时候加载。
children是一条路由中的一个属性,它的路由出口在组件对应的模板上。
{path:'home',component:HomeComponent, children:[{path:'hot',component:Hot},{path:'onsale',component:Onsale}]}
此时Hot和Onsale的出口在HomeComponent对应的模板上,它们是homecomponent的子组件。
举个例子,比如home首页有热卖、促销两个页面,并通过按钮切换,则可以把hot和onsale当作home的children。home模版中需要安插一个路由出口,用于插放hot或者onsale。
最终域名/home/hot会加载首页,然后在首页上加载子组件hot。
后续补充实际的例子
本文阐述了Angular项目中如何定义路由配置,包括项目结构、模块划分、组件关系及路由组织方式。介绍了懒加载模块loadChildren与children属性的使用场景,通过实例说明了如何在首页、购物车和个人中心模块中实现路由嵌套。

被折叠的 条评论
为什么被折叠?



