参考资料：https://angular.cn/guide/router
分享PPT：Angualr路由PPT
一、基础知识
<base href> 元素
index.html中：<base href="/">。这是路由合成的根路径。
Angular的路由器是一个可选的服务，它用来呈现指定的URL所对应的视图。它并不是Angular核心库的一部分，而是在@angular/router包中。所以使用时，需要导入到module.ts中。如：
二、配置
普通配置：
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent }, //:id是参数位
{ path: 'heroes', component: HeroListComponent, data: { title: 'Heroes List' } },
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent } ];//可以匹配所有路径，所以必须放最后
这里举了些常见例子。
懒加载配置：
静态资源按需加载，否则第一次访问的时候，全部资源被加载，会影响性能。
const crisisCenterRoutes: Routes = [
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',component: CrisisListComponent,
children: [
{ path: ':id', component: CrisisDetailComponent},
{ path: '',component: CrisisCenterHomeComponent}
]} ]
}];
预加载配置：
为了获得尽可能小的初始加载体积和最快的加载速度，我们应该对AppModule和HeroesModule（首页面，如登录页面）进行立即加载。其它懒加载。但是，当懒加载的页面在接下几分钟很可以被访问时，可预加载，待用户使用时，体现更好的性能。
配置预加载后，在每次成功的导航后，路由器会在自己的配置中查找尚未加载并且可以预加载的模块。
是否加载某个模块，以及要加载哪些模块，则取决于预加载策略：
Router内置了两种预加载策略：
a.完全不预加载，这是默认值。惰性加载的特性区仍然会按需加载。
b.预加载所有惰性加载的特性区。
c.自定义预加载策略。
使用自定义预加载策略，我们可以控制路由器预加载哪些路由以及如何加载。
如：只预加载那些data.preload标志为true的路由（路由的data属性中添加任何东西）
三、导航
1、直接请求URL
2、点击按钮：
3、方法中跳转：
this.router.navigate(['maintainer/sessions', this.session.id]);
四、路由出口
<router-outlet></router-outlet>
一个模板中只能有一个未命名的<router-outlet>。 但路由器可以支持多个命名的出口（outlet）。
五、路由传参
1、必备参数：
{ path: 'hero/:id', component: HeroDetailComponent }
注意路径中的:id令牌。它为路由参数在路径中创建一个“空位”。在这里，我们期待路由器把英雄的id插入到那个“空位”中。
如：localhost:4200/hero/15
2、可选参数：
可选参数是在导航期间传送任意复杂信息的理想载体。通常，对于强制性的值（比如用于区分两个路由路径的）使用必备参数；当这个值是可选的、复杂的或多值的时，使用可选参数。
3、查询参数：
如何定义一些所有路由中都可用的可选参数呢？ 这就该“查询参数”登场了。片段可以引用页面中带有特定id属性的元素.在导航到其它路由后，它还会存在。
如下配置，可让查询参数在之后的路由中携带：
六、获取参数：（几张图，应该挺明了吧）
import 'rxjs/add/operator/switchMap';
另外，还有一种不太常用的方法：
七、路由守卫
什么时候用路由守卫：
有了URL，则任何用户都能在任何时候导航到任何地方。 但有时候这样是不对的。
该用户可能无权导航到目标组件。
可能用户得先登录（认证）。
在显示目标组件前，我们可能得先获取某些数据。
在离开组件前，我们可能要先保存修改。
我们可能要询问用户：你是否要放弃本次更改，而不用保存它们？
这样的场景，可能我们就要考虑用路由守卫了。路由守卫，可以控制路由器的行为：
用CanActivate来处理导航到某路由的情况。
用CanActivateChild来处理导航到某子路由的情况。
用CanDeactivate来处理从当前路由离开的情况.
用Resolve在路由激活之前获取路由数据。
用CanLoad来处理异步导航到某特性模块的情况。
路由的守卫可以返回一个Observable<boolean>或Promise<boolean>，并且路由器会等待这个可观察对象被解析为true或false。
如果它返回true，导航过程会继续
如果它返回false，导航过程会终止，且用户会留在原地。
守卫还可以告诉路由器导航到别处，这样也取消当前的导航。
如：
AuthGuard是自己定义的**.service.ts，在该service可以去访问后端，如请求该用户是否登录，如果已登录，则跳转到请求的URL，如果未登录，则跳转到登录页面。
有问题，请发邮件到[email protected]