官网详细说明路由与导航：http://angular2.axuer.com/docs/ts/latest/guide/router.html
1.base href
如果app文件夹是应用的根目录，则在index.html的head中加入
<head>
<base href="/">
...
<head>
2.AppModule配置
2.1引用路由
import { RouterModule, Routes } from '@angular/router';
2.2路由数组
const appRoutes: Routers = [ {path: 'pathA',component: AComponent}, {path: 'pathB/:id', component: BComponent}, { path: 'pathC', component: CComponent, data: { proName: 'proValue' } }, {path: '', redirectTo:'pathA', pachMatch: 'full'}, {path: '**', PageNotFoundComponent} //url不匹配配置中任何路径时，显示404页面 ]
注意：path不能以'/'开头。否则无法解析url
2.3NgModule添加路由
@NgModule([
imports:[
...
RouterModule.forRoot(appRoutes)
],
...
])
2.4路由插座
<router-outlet></router-outlet> !<--此处呈现component-->
2.5路由器链接
<a routerLink="/pathA" RouterLinkActive="cssClassName">Link</a>
2.5.1带令牌的路由器链接
<a [routerLink]="['/hero',14]" [routerLinkActive]="active"></a>
- <a routerLink="/hero/14" routerLinkActive="active"></a>
- this.router.navigate(['/hero',14]);
小结
路由器接口
| 路由器部件 | 含义 |
|---|---|
| Router（路由器） | 为激活的URL显示应用组件。管理从一个组件到另一个组件的导航 |
| RouterModule（路由器模块） | 一个独立的Angular模块，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令。 |
| Routes（路由数组） | 定义了一个路由数组，每一个都会把一个URL路径映射到一个组件。 |
| Route（路由） | 定义路由器该如何根据URL模式（pattern）来导航到组件。大多数路由都由路径和组件类构成。 |
| RouterOutlet（路由插座） | 该指令（）用来标记出路由器该在哪里显示视图。 |
| RouterLink（路由链接） | 该指令用来把一个可点击的HTML元素绑定到路由。 点击带有绑定到字符串或链接参数数组的routerLink指令的A标签就会触发一次导航。 |
| RouterLinkActive（活动路由链接） | 当HTML元素上或元素内的routerLink变为激活或非激活状态时，该指令为这个HTML元素添加或移除CSS类。 |
| ActivatedRoute（激活的路由） | 为每个路由组件提供提供的一个服务，它包含特定于路由的信息，比如路由参数、静态数据、解析数据、全局查询参数和全局碎片（fragment）。 |
| RouterState（路由器状态） | 路由器的当前状态包含了一棵由程序中激活的路由构成的树。它包含一些用于遍历路由树的快捷方法。 |
| 链接参数数组 | 这个数组会被路由器解释成一个路由操作指南。我们可以把一个RouterLink绑定到该数组，或者把它作为参数传给Router.navigate方法。 |
| 路由组件 | 一个带有RouterOutlet的Angular组件，它根据路由器的导航来显示相应的视图。 |
angular2系统学习 - 路由与导航(1)基础篇 https://blog.csdn.net/qq451354/article/details/53966296
第二说明：
1.模块注册路由
NgModule注册路由分根模块(AppModule)与子模块注册路由,只有根模块AppModule才能使用forRoot()方法。
- 主模块 RouterModule.forRoot()方法
- 子模块 RouterModule.forChild()方法
2.命令导航路由替代点击Link导航
需要执行导航时，可以使用router对象用来进行导航
this.router.navigate(['hero',id]); this.router.navigate(['hero']);
angular2系统学习 - 路由与导航(2) https://blog.csdn.net/qq451354/article/details/53967736
实例一：
app.module.ts模块说明：
1 import { BrowserModule } from '@angular/platform-browser'; 2 import { NgModule } from '@angular/core'; 3 import {RouterModule, Routes} from '@angular/router'; 4 5 //表单 双向数据绑定 6 import {FormsModule} from '@angular/forms'; 7 import { AppComponent } from './app.component'; 8 //List 中包含两个tab子组件 9 import {ListComponent} from "./list.component"; 10 /*import {ListOneComponent} from "./list-one.component"; 11 import {ListTwoComponent} from "./list-two.component";*/ 12 import {HomeComponent} from "./home.component"; 13 // 定义路由, bootstrap默认加载组件就是AppComponent,所以他就是主页导航页,然后添加的路由都在他的模板中。 14 // 可以所有代码写在NgModule中, 也可以这样自定义常量,然后使用。 15 16 //定义常量 嵌套自路由 17 /*const appChildRoutes:Routes = [ 18 {path:"one",component:ListOneComponent}, 19 {path:"two",component:ListTwoComponent}, 20 //如果地址栏中输入没有定义的路由就跳转到one路由界面 21 { 22 path:"**",redirectTo:"one" 23 } 24 ];*/ 25 //定义常量 路由 26 const appRoutes:Routes=[ 27 {path:'home',component:HomeComponent}, 28 {path:'list',component:ListComponent} 29 /*{ 30 path:'list', 31 component:ListComponent, 32 children:appChildRoutes 33 }*/ 34 ]; 35 //引用路由 36 @NgModule({ 37 declarations: [ 38 AppComponent, 39 HomeComponent, 40 ListComponent 41 /*ListComponent, 42 ListOneComponent, 43 ListTwoComponent*/ 44 ], 45 imports: [ 46 BrowserModule, 47 FormsModule, 48 RouterModule.forRoot(appRoutes) 49 ], 50 providers: [], 51 bootstrap: [AppComponent] 52 }) 53 export class AppModule { }
app.component.ts模块说明：
1 import { Component } from '@angular/core'; 2 3 @Component({ 4 selector: 'app-root', 5 templateUrl: './app.component.html', 6 styleUrls: ['./app.component.css'] 7 }) 8 export class AppComponent { 9 title = 'app'; 10 }
app.component.html模块说明：
1 <nav> 2 <a routerLink="/home" routerLinkActive="active">首页</a> 3 <a routerLink="/list" routerLinkActive="active">列表页</a> 4 </nav> 5 <router-outlet></router-outlet>
home.component.ts模块说明：
1 import { Component } from '@angular/core'; 2 3 @Component({ 4 selector: 'app-home', 5 templateUrl: './home.component.html', 6 styleUrls: ['./app.component.css'] 7 }) 8 export class HomeComponent { 9 title = 'home'; 10 }
home.component.html模块说明：
1 <div style="text-align:center">home的页面</div>
list.component.ts模块说明：
1 import { Component } from '@angular/core'; 2 3 @Component({ 4 selector: 'app-list', 5 templateUrl: './list.component.html', 6 styleUrls: ['./app.component.css'] 7 }) 8 export class ListComponent { 9 title = 'list'; 10 }
list.component.html模块说明：
1 <div style="text-align:center"> 2 list页面 3 </div>
第三种说明：主子路由
NgModule注册路由分根模块(AppModule)与子模块注册路由,只有根模块AppModule才能使用forRoot()方法。
- 主模块 RouterModule.forRoot()方法
- 子模块 RouterModule.forChild()方法
RouterModule.forRoot方法实例：
| 结构 | 说明 |
|---|---|
| AppModule | 根模块 |
| AppRoutingModule | 根路由 |
| AppComponent | 根组件壳 |
| ParAComponent | 根模块组件A |
| ParBComponent | 根模块组件B |
| - | - |
| ChildModule | 子模块 |
| ChildRoutingModule | 子路由 |
| ChildCompnent | 子组件壳 |
| ChildAComponent | 子组件A |
| ChildBComponent | 子组件B |
| ChildCComponent | 子组件C |
下面是各结构核心代码