导航是很简单的，只是不同页面之间的切换，路由是实现导航的一种。
一个url对应的一个页面，在angular2中是一个组件。定义一个规则。
基础知识
大多数带路由的应用都要在index.html的标签下先添加一个元素，来告诉路由器该如何合成导航用的URL。
路由是从@angular/router包中引入的。
路由都是需要进行配置的。而这个配置需要的也就是RouterModule模块。
一个路由配置
path中不能用斜线/开头。
这些路由的定义顺序是故意如此设计的。 路由器使用先匹配者优先的策略来匹配路由，所以，具体路由应该放在通用路由的前面。在上面的配置中，带静态路径的路由被放在了前面，后面是空路径路由，因此它会作为默认路由。而通配符路由被放在最后面，这是因为它是最通用的路由，应该只在前面找不到其它能匹配的路由时才匹配它。
const appRoutes: Routes = [ { path:'',// empty path匹配各级路由的默认路径。 它还支持在不扩展URL路径的前提下添加路由。 component: DashboardComponent },{ path: 'dashboard', component: DashboardComponent }, { path: 'loopback', component: LoopbackComponent }, { path: 'heroparent', component: HeroParentComponent }, { path:'version', component: VersionParentComponent }, { path: '**',// **代表该路由是一个通配符路径。如果当前URL无法匹配上我们配置过的任何一个路由中的路径，路由器就会匹配上这一个。当需要显示404页面或者重定向到其它路由时，该特性非常有用。 component: DashboardComponent, } ]; export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot(appRoutes);
RouterOutlet - 路由插座
显示路由器生成的视图。在展示父路由的位置中的某个地方展示子路由对应的地方。
路由模块
最开始的路由，我们是直接写在app.module.ts文件中的，像这样，我们可以实现简单的导航。
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; import { CrisisListComponent } from './crisis-list.component'; import { HeroListComponent } from './hero-list.component'; const appRoutes: Routes = [ { path: 'crisis-center', component: CrisisListComponent }, { path: 'heroes', component: HeroListComponent } ]; @NgModule({ imports: [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes) ], declarations: [ AppComponent, HeroListComponent, CrisisListComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
但是这样不方便，所以我们要进行路由的分离，重构成我们自己的路由模块。like this:
const appRoutes: Routes = [ { path:'', component: DashboardComponent },{ path: 'dashboard', component: DashboardComponent }, { path: 'loopback', component: LoopbackComponent }, { path: 'heroparent', component: HeroParentComponent }, { path:'version', component: VersionParentComponent }, { path: '**', component: DashboardComponent, } ]; export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot(appRoutes);
同样我们还可以写多个路由模块。但是我们必须在app.module.ts中进行imports:[appRoutingModule]。
组件路由
我们需要将一些特征区域分割开来，做成自己单独的模块。必如hero模块。在这里，我们需要hero单独的导航，这也就是组件路由。
平级的路由
@NgModule({ imports: [ RouterModule.forChild([ { path: 'heroes', component: HeroListComponent }, { path: 'hero/:id', component: HeroDetailComponent }, { path:'heroform', component: HeroFormComponent }, ]) ], exports: [ RouterModule ] }) export class HeroRoutingModule { }
我们还有另外一中类型的路由组织方式，路由树的形式。
const crisisCenterRoutes: Routes = [ { path: '', redirectTo: '/crisis-center', pathMatch: 'full' }, { path: 'crisis-center', component: CrisisCenterComponent, children: [ { path: '', component: CrisisListComponent, children: [ { path: ':id', component: CrisisDetailComponent, }, { path: '', component: CrisisCenterHomeComponent } ] } ] } ]; @NgModule({ imports: [ RouterModule.forChild(crisisCenterRoutes) ], exports: [ RouterModule ] }) export class CrisisCenterRoutingModule { }
重定向路由
添加一个redirect路由，它会把初始的相对URL（”）悄悄翻译成默认路径(/crisis-center)。
{ path: '', redirectTo: '/crisis-center', pathMatch: 'full' },
路由守卫
简介
路由守卫，应用在这个路由不是对所有导航都有效的，是有一些前置条件的，只有当这些前置条件满足的时候，才能被导航到该页面。