前端路由的配置教程

首先在路由界面配置路由，children是配置子路由的

const routes: Routes = [

{path:'',component:HomeComponent}

];

然后在引入組件：

Routes的使用

import { HomeComponent } from './home/home.component';

在path中不能使用"/"，因為在多個視圖間導航時，自由使用相對或者絕對路徑

RouteRoutlet的使用：

插座，所有的界面都在本界面的下面顯示

RouterLink的使用：

app.component.html界面：

<a [routerLink]="['/']">主頁</a>

<a[routerLink]="['/product']">商品詳情</a>

<router-outlet></router-outlet>

解釋：routerLink后面'/'的是跳轉的跟路由，加上點是跳轉子路由的

點擊主頁面上的按鈕跳轉到路由界面

app-routing.module.ts路由界面

import { HomeComponent } from './home/home.component';

import { ProductComponent } from './product/product.component';

const routes: Routes = [

{path:'',component:HomeComponent},

{path:'product',component:ProductComponent}

];

例如：我點擊商品詳情，然后就找到跟路由中的product，然后根據引用找到相應的界面

還有通過按鈕跳轉：

<input type="button" value="商品詳情" (click)="todo()">

然后在到app.component.ts

constructor(private router:Router){

}

todo(){

this.router.navigate(['/product']);

}

}

完整界面截圖：

ActivatedRoute的使用：

app.component.html界面：

<a [routerLink]="['/product']" [queryParams]="{id:1}">商品詳情</a>

product.component.ts界面，如何獲取ActivatedRoute參數：

export class ProductComponent implements OnInit {

private productId:number;

//首先在構造函數中注入（碼號后面的是類型）

constructor(private routerInfo:ActivatedRoute) { }

ngOnInit() {

//獲取參數

this.productId=this.routerInfo.snapshot.queryParams["id"];

}

}

product.component.html界面，現在最后的參數：

<p>

商品ID：{{productId}}

</p>

第二種傳參方式，URL方式

第一步：修改路由中的path屬性，改成

path:'product/:id',component:ProductComponent},

第二步：修改routerLink中的參數：

<a [routerLink]="['/product',1]" >商品詳情</a>

第三步修改取值：

ngOnInit() {//從URL中獲取

this.productId=this.routerInfo.snapshot.params["id"];

}

這種最后獲取的值是1，

todo(){

this.router.navigate(['/product',2]);

}

這方式獲取的結果是2但是來回切換的時候路徑中的值變換頁面的值不更換，解決這種問題方法叫做參數快照，使用這種方式叫做參數快照（snapshot），

在查詢參數中傳遞數據：

使用的方式參數快照（snapshot）  和  參數訂閱（subscribe）解決問題

步驟：修改第三步中的獲取參數的方式

ngOnInit() {

//參數訂閱

this.routerInfo.params.subscribe((params:Params)=>this.productId=params["id"]);

//this.productId=this.routerInfo.snapshot.params["id"];

}

路由重定向：

制定路由跳轉的界面：

{path:'',redirectTo:'/home',pathMatch:'full'},

{path:'home',component:HomeComponent},

解釋上面的意思：

當路由是空字符串的時候直接跳轉到home中，然后通過下面這行直接找到相應的home界面

子路由：

子路由創建的方法：

{path:'product/:id',component:ProductComponent,children:[

{path:'',component:ProductComponent},

{path:'seller/:id',component:SellerInfoComponent}

]},

注解：

路由配置完成之后，然后在相應的界面上添加插座routeroutlet

seller-info組件的配置：

seller-info.component.html

<p>

銷售員ID：{{selledid}}

</p>

seller-info.component.ts

部分代碼：

export class SellerInfoComponent implements OnInit {

private selledid:number;//定義一個數字型的變量

constructor(private routeinfo:ActivatedRoute) { }//構造函數

ngOnInit() {

this.selledid=this.routeinfo.snapshot.params["id"];//獲取路由中的值

}

}

product.component.html頁面的子組件，所以在此界面中添加

<a[routerLink]="['./']">商品詳情</a><!--子路由的寫法-->

<a[routerLink]="['./seller',99]">銷售員信息</a>

<router-outlet></router-outlet>

輔助路由（兄弟路由）

輔助路由插座的寫法：

<router-outlet name="aux"></router-outlet>

路由配置寫法：

{path:'chat',component:ChatComponent,outlet:'aux'}

在主頁面顯示寫法：

<a [routerLink]="[{outlets:{aux:'chat'}}]">開始聊天</a>

<a [routerLink]="[{outlets:{aux:null}}]" >結束聊天</a>

解釋：通過路由中的outlets找到chat的html頁面，然后顯示！

圖解：

<a [routerLink]="[{outlets:{primary:'home',aux:'chat'}}]">開始聊天</a>

點擊開始聊天，chat界面和home界面都會顯示

路由守衛

先寫一個路由守衛，新建里一個ts，然后寫進去：

import { CanActivate } from "@angular/router";

export class loginGuard implements CanActivate{

canActivate(){

let lgogenIn:boolean=Math.random()<0.5;//獲取隨機數，

if(!lgogenIn){大于0.5顯示未登錄

console.log("用戶未登錄");

}

return lgogenIn;

}

}

綁定路由守衛：

canActivate:[loginGuard]，實例化是通過angular注入來實例化的

守衛那個路由，就在那個路由的后面寫上

providers:[loginGuard]

詳細用法：

離開路由守衛，就是守衛那個組件，在離開的時候就會提示：

創建一個ts文件，然后

import { CanDeactivate } from "@angular/router";

import { ProductComponent } from "../product/product.component";//引用product組件

export class UnsaveGuad implements CanDeactivate<ProductComponent> {

canDeactivate(component: ProductComponent) {

return window.confirm("你還沒有保存確定離開嗎？");

}

}

添加在要被守衛的組件路由后面，并且添加providers

canDeactivate:[UnsaveGuad]//添加在路由后面

UnsaveGuad//添加在providers數組里面

守衛可以添加多個，在數組中有多個的時候可以循環完成如有一個沒有滿足條件，那么就不會執行當前的操作！