最近比较忙，抽空看了 angular 官网上的路由与导航，其实还是有很多想了解的地方，可惜目前没有时间一一验证学习，只能以后有空再说了，在这里只是记录一下学习是遇到的混淆的点。

路由配置(Route) 路由器(Router) 激活路由(ActivatedRoute) 路由状态(RouterState)

先给出一份路由模块配置:

const routers: Routes = [
  {
    path: '', children: [
      {
        path: '', component: MainComponent, children: [{path: 'son', component: SonComponent}
        ]
      },
      {path: 'modal', component: ModalComponent}
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

在这里 routers 变量的类型是 Routers, 其实就是一个 Route 数组:

所以 Route 的意思就显而易见了，就是一个简单的路由配置

Router 路由器(我看的时候老是和 Route 看混), 提供导航和操纵 URL 的能力。

ActivatedRoute 包含与当前组件相关的路由信息, 可以从上面获取参数，url，父子路由信息等。

路由状态 RouterState, 我们都知道路由为一个树，由我们配置的路由信息构建而成，而 RouteState 就代表当前路由的这棵树，可以通过 RouteState 获取当前的路由树。参考链接
这是我按照上边的 路由配置打印的结果，可以看到 RouteState 最主要的为一个 Root 属性，类型是 ActivatedRoute, 一般为 AppComponent, 而在他的 Children 属性下一步步可以看到我们的 MainCoponemt 和 SonComponent, 我浏览器路由为 http://localhost:4200/son; 这说明当前 MainComponet 和 SonComponent,AppComponent 都是被路由激活的组件, 他们都记录在 RouteState 这个当前的路由状态上。

路由快照(Snapshot)

在 ActivatedRoute,RouteState 等路由信息中，都有一个带有 XXXSnapshot 字段的属性，这个为快照，也就是当前瞬间的路由信息。

默认情况下，如果没有访问过其它组件就导航到了同一个组件实例，那么路由器倾向于复用组件实例。如果复用的话，路由的参数可以变化，这也是 ActivatedRoute 里的参数需要订阅的原因，而快照则是保存每一次路由的信息。
例如我们修改上边 son 路由，接受一个 id 参数, 一个方法跳转，一个方法显示快照参数:

<p>
  id:{{id}}
</p>
<button (click)="show()"> 显示 id</button>
<button (click)="go()"> 跳转 </button>

id: number;

  constructor(private active: ActivatedRoute, private router: Router) { }

  ngOnInit() {this.id = +this.active.snapshot.paramMap.get('id');
    console.log('创建');
  }

  show() {this.id = +this.active.snapshot.paramMap.get('id');
  }


  go() {
    const id = this.id + 1;
    this.router.navigateByUrl('/son/' + 10);
  }

输入网址 http://localhost:4200/son/9, 可以看到 id 显示 9，并且控制台打印了‘创建’:

点击跳转，路由 变为 http://localhost:4200/son/10, 而页面却没有变化，也没有再打印，说明组件进行了复用

点击显示 id, 可以看到 id 变成了 10,

这说明虽然路由复用了，但是路由快照却又是重新的一份，这在仅需要路由瞬时信息即为有效，在路由处理器中通常都是用的路由快照。

总结

其实感觉还有很多想学习的地方，但无奈时间匆忙，所以只能以后再慢慢探究了。