声明
这个教程的目标是让初学者快速掌握 Angular 路由的基本使用方法，避免复杂的概念影响对路由基本用法的认识，只涉及路由模块导入、路由匹配算法、路由跳转指令，并不涉及守护路由、子路由，解析路由（resolver），路由参数的获取等高级路由知识 。
前言
路由是一个 Web 应用不可缺少的一环， 路由的存在可以让用户对应用中感兴趣的内容进行收藏方便下次访问。 在单页应用程序（SPA）中，路由必须由前端来处理。Angualr 提供了功能强大的路由模块，可以帮我们完成复杂的页面路由需求。
对于一个正常的 Web 应用来说，当一个路由发生时，会触发两个方面的变化，一是浏览器中的地址会发生改变，二是页面局部或者全部会发生改变。为了做到这两点，Angular 通过监听浏览器地址的改变来触发页面的渲染。这其中的关键要数 “占位符” 和路由匹配的用法！
那就让我们开始吧~
准备工作
为了代码的可维护性，我们遵循 Angular 的最佳实践，把路由作为一个单独的模块独立出来。将其命名为 AppRoutingModule，在 AppModule 中导入。
接着，我们来编写这路由模块 AppRoutingModule 。同样为了简单起见，我们先忽略路由匹配的具体内容，并用省略号代替。
可以看到，这里我们使用到了 @angular/router 包下的 RouterModule 模块和内置的路由匹配数组 Routes。有别于其他 Module 的导入方式，这里我们用 RouterModule.forRoot 来生成一个可导入的 Module。
forRoot 与 forChild
为什么要使用 forRoot ？
这是因为 forRoot 方法除了能为 AppModule 提供 Angular 内建路由组件和指令之外，还能在应用的整个生命周期提供一系列统一的路由服务（Service）。这些服务在某些我们需要对路由进行更加复杂操作的场合就会用到。而在子模块中，我们只需使用到路由的组件和指令，就不用再次导入这些服务，因此此时只要使用 forChild 方法即可。
话说回来，为什么这些服务只要导入一次而不用导入多次？
这是因为 Angular 用特殊的设计模式——依赖注入来满足我们的需求。依赖注入的特点就是，一旦我们在代码中声明了这些服务的构造方式，Angular 就会在服务的作用域内通过注入器生成一个单一的实例/对象。
假设我们在 AppModule 提供了一组服务，然后在其他模块也导入了这组服务，并且我们将这些模块导入到 AppModule 中。那么就可能导致这组服务被多次注册。虽然最后通过服务标记（其实叫 token）可以对服务实例进行覆盖。但是这样相当于初始化了多次实例。性能上有所损耗。
更糟糕的是，在某些场景下（LazyLoad）就会非常神奇的拥有了多份完全不同副本的实例，导致在资源共享的场景下出现 Bug。我在这篇文章中详解了 forRoot 针对的场景。
延伸阅读
Angular Router 源码中 forRoot 提供的服务可是 forChild 的好多倍。可以点击这里看路由模块 forRoot 方法提供的服务。
万事具备
好了~ 现在我们就来探索 Angular 是如何解决路由中 Where（在哪里渲染）和 How（如何渲染或者说用什么组件渲染）的问题的。
Where——占位符
Angular 在路由变化时如何渲染页面，是整体还是局部？我们用一个占位符（placeholder）或者说是一个指令 router-outlet 来做到。
在视图层我们添加了这个占位符之后，一旦路由发生改变，Angular 就会利用在路由匹配中定义的组件来对这个位置进行渲染，达到页面整体或局部变化的目的。很简单吧！ 接下来让我们来解决 How 的问题。
How——路由匹配
在 Angular 中，路由匹配用来解决如何渲染页面的问题。我们知道，Angular 中，通过功能将各个页面和对应的逻辑划分成一个又一个的组件。而所谓路由匹配，就是在浏览器地址（路由）发生变化时，Angular 通过预先维护的一组路由——组件映射，来对页面的整体或者局部进行渲染。
这边我们添加了三个路由匹配规则，profile、home 和 一个空路由。这里的语法翻译成人类语言就是：
Profile 路由
路由前缀 profile 开头的路由，即形式为 localhost:4200/profie* 的路由，由组件 ProfileComponent 负责渲染，替换掉 router-outlet 的位置。
Home 路由
路由前缀 home 开头的路由，即形式为 localhost:4200/home* 的路由，由组件 HomeComponent 负责渲染，替换掉 router-outlet 的位置。
空路由
空路由，即形式为 localhost:4200/ 的路由 ，重定向到 /home。这里的重定向意思是，把当前路由改成 home ，然后重新走一遍路由匹配表。
这里 redirectTo 就是重定向的意思。
细心的读者可能发现，这里对于空路由，除了 redirectTo 这条规则，我们还加入了 pathMatch: full 这条规则。这是因为 Angular 中默认路由匹配的规则是 prefix（官方文档）。而空路由（”）默认是所有路由的前缀，所以，假如不加 full 的话，所有路由都会匹配到这条空路由上。这点切记。
当然，我在这篇详解路由匹配中对路由匹配机制有着更加详细的阐述，觉得不过瘾的朋友可以看看。
最后一步！
所有的准备工作都已经完成！你就可以编写路由中涉及到的组件，来完成具体的页面渲染逻辑了。我们只要在需要设置路由变化位置使用routerLink 指令就能完成跳转啦。注意这里的 profile 要加上单引号哦，否则会被解析成组件的变量而报错啦。
当然你也可以这样写，这样 profile 会被直接解析成字符串。
总结
路由的基本用法和一般的 Angular 内建模块有一些区别，主要在导入模块时需要调用路由模块的 forRoot 方法来注入一些全局的服务。同时针对路由的特点，Angular 利用 router-outlet 指令决定路由渲染 Where 的问题，利用路由匹配来解决 How 的问题。