這篇文章主要介紹Angular中Route路由的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)瑪納斯免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了數(shù)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Angular 路由（Route）

我們可以將路由器理解成控制整個(gè)應(yīng)用狀態(tài)的視圖對(duì)象， 每個(gè)應(yīng)用都有一個(gè)路由器； 路由器的另一個(gè)作用是為每個(gè)視圖分配唯一的 url， 可以利用這個(gè) url 使應(yīng)用之間跳轉(zhuǎn)到某一個(gè)特定的視圖狀態(tài)。 單頁(yè)應(yīng)用其實(shí)就是一個(gè)視圖狀態(tài)的集合。

相關(guān)教程推薦：《angular教程》

單頁(yè)應(yīng)用（SPA）

一個(gè)單頁(yè)應(yīng)用是主頁(yè)面只加載一次， 不再重復(fù)刷新， 只是改變頁(yè)面部分內(nèi)容的應(yīng)用。 Angular 應(yīng)用就是單頁(yè)應(yīng)用， 在 Angular 中使用路由器來(lái)實(shí)現(xiàn)根據(jù)用戶的操作來(lái)改變頁(yè)面的內(nèi)容而不重新加載頁(yè)面。 單頁(yè)應(yīng)用可以理解為一個(gè)視圖狀態(tài)的集合。

路由對(duì)象

Routes 路由數(shù)組

路由器需要先配置才會(huì)有路由信息, 并用 RouterModule.forRoot 方法來(lái)配置路由器。 當(dāng)瀏覽器的 URL 變化時(shí)， 路由器會(huì)查找對(duì)應(yīng)的 Route（路由）， 并據(jù)此決定該顯示哪個(gè)組件。
基礎(chǔ)配置：

const appRoutes: Routes = [
  { path: 'common/a', component: AComponent },
  { path: 'common/b/:id', component: BComponent },
  { path: '**', component: NotFoundComponent}, // 定義通配符路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  ...
})

RouterOutlet 路由出口

RouterOutlet 是一個(gè)來(lái)自路由模塊中的指令，它的用法類似于組件。 它扮演一個(gè)占位符的角色，用于在模板中標(biāo)出一個(gè)位置，路由器將會(huì)把要顯示在這個(gè)出口處的組件顯示在這里。

 
組件的內(nèi)容顯示在（router-outlet）下方
 

Router 路由器

使用 Router 對(duì)象導(dǎo)航。

constructor(private router: Router) {}

toAComponent() {
    this.router.navigate(['/common/a']);
    // 或 this.router.navigateUrl('common/a');
}

RouterLink 路由器鏈接

路由鏈接 url 必須以 ‘/’ 開(kāi)頭。

主頁(yè)
B組件

ActivatedRoute 激活的路由

當(dāng)前激活的路由的路徑和參數(shù)可以通過(guò) ActivateRoute 的路由服務(wù)來(lái)獲取。

• 常用屬性：

  屬性	說(shuō)明
  url	路由路徑的 Observable 對(duì)象，是一個(gè)由路由路徑中的各個(gè)部分組成的字符串?dāng)?shù)組.
  data	一個(gè) Observable，其中包含提供給路由的 data 對(duì)象。也包含由解析守衛(wèi)（resolve guard）解析而來(lái)的值。
  paramMap	一個(gè) Observable，其中包含一個(gè)由當(dāng)前路由的必要參數(shù)和可選參數(shù)組成的 map 對(duì)象。用這個(gè) map 可以獲取來(lái)自同名參數(shù)的單一值或多重值。
  queryParamMap	一個(gè) Observable，其中包含一個(gè)對(duì)所有路由都有效的查詢參數(shù)組成的 map 對(duì)象。 用這個(gè) map 可以獲取來(lái)自查詢參數(shù)的單一值或多重值。

• 在查詢參數(shù)中傳遞數(shù)據(jù)

/common/b?id=1&name=2 => ActivatedRoute.queryParamMap

• 在路由路徑中傳遞數(shù)據(jù)

{path: /common/b/:id} => /commo/b/1 => ActivatedRoute.paramMap

• 在路由配置中傳遞數(shù)據(jù)

{path: /common/b, component: BComponent, data: {id:“1”, title: “b”}}

• 示例

constructor(
    private activatedRoute: ActivatedRoute
) { }

ngOnInit() {
   // 從參數(shù)中獲取
    this.activatedRoute.queryParamMap.subscribe(params => {
      this.id = params.get('id');
    });

   // 或
  // this.activated.snapshot.queryParamMap.get('id');

    // 從路徑中獲取
    this.activatedRoute.paramMap.subscribe(params => {
      this.id = params.get('id');
    });

    this.activatedRoute.data.subscribe(({id,title}) => {

    });
}

snapshot: 參數(shù)快照，是一個(gè)路由信息的靜態(tài)快照，抓取自組件剛剛創(chuàng)建完畢之后，不會(huì)監(jiān)聽(tīng)路由信息的變化。如果確定一個(gè)組件不會(huì)從自身路由到自身的話，可以使用參數(shù)快照。

subscribe: 參數(shù)訂閱，相當(dāng)于一個(gè)監(jiān)聽(tīng)器，會(huì)監(jiān)聽(tīng)路由信息的變化。

重定向路由

在用戶訪問(wèn)一個(gè)特定的地址時(shí)，將其重定向到另一個(gè)指定的地址。
配置重定向路由：

// 當(dāng)訪問(wèn)根路徑時(shí)會(huì)重定向到 home 路徑
const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent}
];

子路由

子路由配置語(yǔ)法：

const appRoutes: Routes = [
  { 
    path: 'home', 
    component: HomeComponent,
    children: [
      { path: '', component: AComponent},
      { path: 'b', component: BComponent}
    ]
  },
];

輔助路由

輔助路由又兄弟路由，配置語(yǔ)法：

// 路由配置
{path: 'xxx', component: XxxComponent, outlet:'xxxlet'},
{path: 'yyy', component: XxxComponent, outlet:'yyylet'}

// 使用



// 鏈接
Xxx

當(dāng)點(diǎn)擊Xxx鏈接時(shí)，主插座會(huì)顯示’/home’鏈接所對(duì)應(yīng)的組件，而xxxlet插座會(huì)顯示xxx對(duì)應(yīng)的組件。

路由守衛(wèi)（guard）

CanActivate/CanActiveChild：處理導(dǎo)航到某路由的情況

當(dāng)用戶不滿足這個(gè)守衛(wèi)的要求時(shí)就不能到達(dá)指定路由。

export class DemoGuard1 implements CanActivate {

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    ...
    return true;
  }
}

CanDeactivate：處理從當(dāng)前路由離開(kāi)的情況

如果不滿足這個(gè)守衛(wèi)的要求就不能離開(kāi)該路由。

// 泛型中 AComponent 代表要守衛(wèi)的組件。
export class DemoGuard2 implements CanDeactivate {
 canDeactivate(component: AComponent): boolean {
   // 根據(jù) component 的信息進(jìn)行具體操作
   retturn true;
 }
}

Resolve：在路由激活之前獲取路由數(shù)據(jù)

在進(jìn)入路由時(shí)就可以立刻把數(shù)據(jù)呈現(xiàn)給用戶。

@Injectable()
export AResolve implements Resolve {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const id = route.paramMap.get('id');
     // 可以根據(jù)路由中的信息進(jìn)行相關(guān)操作
  }
}

最后，需要將路由守衛(wèi)添加到路由配置中：

const appRoutes: Routes = [
  { 
    path: 'common/a', 
    component: AComponent,
    canActivate: [DemoGurad1],
    canDeactivate: [DemoGuard2],
    resolve: {data: AResolve}
   },
  { path: 'common/b/:id', component: BComponent },
  { path: '**', component: NotFoundComponent}, // 定義通配符路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  ...
})

以上是“Angular中Route路由的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！