angular2.0之路由与导航

大多数应用程序包含多个屏幕或视图 (view)。 用户通过点击链接、按钮和其它类似动作，在它们之间导航，使应用程序从一个视图切换到另一个视图。

Angular 的组件路由器 (component router)是一个特性丰富的机制，可以配置和管理整个导航过程，包括建立和销毁视图。

多数情况下，组件会通过RouterConfig中定义的路由到视图的对照表来附加到路由器上。

路由组件的模板中带有一个RouterOutlet元素，那是显示路由器生成的视图的地方。

应用中的其它视图中某些锚标签或按钮上带有RouterLink指令，用户可以点击它们进行导航

1. 设置<base href>   

<base href="/">

路由器使用浏览器的history.pushState进行导航。 感谢pushState！有了它，我们就能按所期望的样子来显示应用内部的URL路径，比如：localhost:3000/crisis-center。虽然我们使用的全部是客户端合成的视图，但应用内部的这些URL看起来和来自服务器的没有什么不同。

2.在@angular/router包中导出路由器

import { RouterModule, Routes } from '@angular/router';

3.定义路由对象

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', component: HeroListComponent }
];

4。我们将路由数组传递到RouterModule.forRoot方法，该方法返回一个包含已配置的Router服务提供商模块和一些其它路由包需要的服务提供商。应用启动时，Router将在当前浏览器URL的基础上进行初始导航。

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
5。作为简单的路由配置，将添加配置好的RouterModule到AppModule中就足够了。 随着应用的成长，我们将需要将路由配置重构到单独的文件，并创建路由模块 - 一种特别的、专门为特征模块的路由器服务的服务模块

路由器指令集
RouterLink、RouterLinkActive和RouterOutlet是由RouterModule包提供的指令
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Angular Router</h1>
    <nav>
      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent { }
最后总结：

 
 
加载路由库
往壳组件的模板中添加一个导航条，导航条中有一些A标签、routerLink指令和routerLinkActive指令
往壳组件的模板中添加一个router-outlet指令，视图将会被显示在那里
用RouterModule.forRoot配置路由器模块
设置路由器，使其合成“HTML 5”模式的浏览器URL。