Benefit to use child router is Angualr 2 then can lazy load the component on demand.
Define a child router by adding three dots `/characters/...`:
@RouteConfig([ { path: ‘/characters/...‘, name: ‘Characters‘, component: CharactersComponent, useAsDefault: true }, { path: ‘/vehicles/...‘, name: ‘Vehicles‘, component: VehiclesComponent } ])
So both `characters` and `vehicles` component container child router.
Then in each component, we define its child rotuer
import { Component } from ‘angular2/core‘;
import { RouteConfig, ROUTER_DIRECTIVES } from ‘angular2/router‘;
import { CharacterComponent } from ‘./character.component‘;
import { CharacterListComponent } from ‘./character-list.component‘;
import { CharacterService } from ‘./character.service‘;
@Component({
selector: ‘story-characters-root‘,
template: `
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path: ‘/‘, name: ‘Characters‘, component: CharacterListComponent, useAsDefault: true },
{ path: ‘/:id‘, name: ‘Character‘, component: CharacterComponent }
])
export class CharactersComponent { }
import { Component, OnInit } from ‘angular2/core‘;
import { RouteConfig, ROUTER_DIRECTIVES } from ‘angular2/router‘;
import { VehicleListComponent } from ‘./vehicle-list.component‘;
import { VehicleComponent } from ‘./vehicle.component‘;
import { VehicleService } from ‘./vehicle.service‘;
@Component({
selector: ‘story-vehicles-root‘,
template: `
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [VehicleService]
})
@RouteConfig([
{ path: ‘/‘, name: ‘Vehicles‘, component: VehicleListComponent, useAsDefault: true },
{ path: ‘/:id‘, name: ‘Vehicle‘, component: VehicleComponent }
])
export class VehiclesComponent { }
----------------
The list component, set routerLink:
<ul class="characters"> <li *ngFor="#character of characters | async"> <a href="" [routerLink]="[‘Character‘, {id: character.id}]"> {{character.id}}. {{character.name}} </a> </li> </ul>
原文：http://www.cnblogs.com/Answer1215/p/5406643.html