前言

• 由于angular官網(wǎng)路由與導(dǎo)航章節(jié)介紹的內(nèi)容太多半火、太復(fù)雜越妈，本文本著實(shí)用的目的介紹angular路由的常用配置及導(dǎo)航傳參
• 閱讀本文前，建議先閱讀[ionic官網(wǎng)路由與導(dǎo)航內(nèi)容

路由配置

• 常見的路由配置如下代碼钮糖，配置說明看代碼上的注釋梅掠，后面還有重難點(diǎn)說明

import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
  ...
  RouterModule.forRoot([
    // 若app啟動(dòng)地址為http://localhost:8100/，則訪問LoginPage
    { path: '', component: LoginPage },

    // 訪問http://localhost:8100/main，則跳轉(zhuǎn)至mainPage
    { path: 'main', component: mainPage },

    // loadChildren懶加載瓤檐，參數(shù)值是相對(duì)模塊文件所在路徑
    // 訪問http://localhost:8100/register，才去加載資源
    // 建議app一級(jí)頁(yè)面使用component娱节，二級(jí)頁(yè)面均使用loadChildren
    {path: 'register', loadChildren: './pages/login/register/register.module#RegisterPageModule'}

     // 訪問http://localhost:8100/detail/2挠蛉，則訪問DetailPage肄满，id為動(dòng)態(tài)參數(shù)
     {path: 'detail/:id', component: DetailPage },

     // 訪問main/666重定向到mainPage
     {path: 'main/666', redirectTo: '/main',  pathMatch: 'full' },

     // pathMatch: 'prefix'怒炸，訪問main/666、main/xxx、main/abc，均跳轉(zhuǎn)到mainPage
     {path: 'main', redirectTo: '/main',  pathMatch: 'prefix' },

     // 路徑匹配不到則訪問NotFoundPage
     {path: '**', component: NotFoundPage },

     // children（父子路由配置）
     // 訪問/tabs跳轉(zhuǎn)到TabsPage，TabsPage只是一個(gè)底部導(dǎo)航。也相當(dāng)于web網(wǎng)站的頂部導(dǎo)航或左側(cè)導(dǎo)航
     // 所以需要訪問/tabs/demo，才會(huì)顯示導(dǎo)航和內(nèi)容
     // 訪問/tabs/tab1/test，顯示導(dǎo)航和testPage，test模塊使用loadChildren懶加載
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {path: 'demo', component: DemoPage},
            {path: 'tab1', component: Tab1Page},
            {path: 'tab1/test', loadChildren: './pages/tab1/test/test.module#TestPageModule'},
            {path: 'mine', component: MinePage}
        ]
    }

  ])
  ],
})

• 使用component，需要在對(duì)應(yīng)的模塊declarations中聲明組件
  
• 使用loadChildren加載子模塊憋他，路徑是相對(duì)相對(duì)路徑揪罕，相對(duì)于父模塊文件所在路徑鲁猩；什么時(shí)候會(huì)用loadChildren配置？
  在web端界面一般頂部或左側(cè)有導(dǎo)航，下面或右側(cè)顯示內(nèi)容沐飘，在app端一般底部有tab導(dǎo)航筛峭，上面顯示內(nèi)容挂签；如下配置，TabsPage就是導(dǎo)航界面芹关，children配置內(nèi)容界面路由

    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {path: 'demo', component: DemoPage},
            {path: 'mine', component: MinePage}
        ]
    }

• 根模塊是forRoot子模塊是forChild，如下圖所示
  
• 建議app一級(jí)頁(yè)面使用component配置往堡，二級(jí)頁(yè)面使用loadChildren痹兜，如下圖是我的路由配置遗淳，TabsPage是導(dǎo)航頁(yè)面疆液，Tab1Page掉缺、DemoPage、MinePage是一級(jí)頁(yè)面扮宠，其余是二級(jí)頁(yè)面
  考慮多人開發(fā)，若同時(shí)修改一份路由文件被廓，會(huì)經(jīng)常沖突挎春，所以按業(yè)務(wù)分類多個(gè)配置文件，所以下圖出現(xiàn)...tab1Routes施禾、...demoRoutes、 ...mineRoutes投慈，完整代碼點(diǎn)這里
  
• redirectTo重定向有個(gè)坑，假如配置如下痪署，由于TabPage使用component配置码泞，則應(yīng)用啟動(dòng)時(shí)就會(huì)加載TabPage，當(dāng)你后來(lái)導(dǎo)航到/test狼犯，則會(huì)重定向到TabPage余寥，此時(shí)TabPage就會(huì)初始化第二次领铐，如果你在constructor()中對(duì)全局對(duì)象做過修改那就回修改第二次
  我當(dāng)時(shí)在tabs.page.ts文件中訂閱android返回按鈕事件，就訂閱了兩次劈狐，而且只能在真機(jī)調(diào)試中發(fā)現(xiàn)罐孝，坑很深

const routes: Routes = [
    {path: 'test', redirectTo: 'tab',  pathMatch: 'full' },
    {path: 'tab',  component: TabPage}
];

• 剛開始對(duì)路由配置不熟悉，應(yīng)盡量避免使用path: ''配置肥缔，尤其類似下面的重定向莲兢，要不然會(huì)讓你懵逼

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

如下gif圖，從tab2跳轉(zhuǎn)到test頁(yè)面续膳，點(diǎn)擊返回改艇，竟然返回到了tab1頁(yè)面，如下圖2注釋默認(rèn)生成的path: ''路由即可

圖2

• 如下圖紅色框內(nèi)代碼坟岔，是給頁(yè)面動(dòng)態(tài)添加返回按鈕谒兄，當(dāng)頁(yè)面是根頁(yè)面時(shí)，返回按鈕不顯示社付；當(dāng)ion-back-button添加defaultHref屬性后承疲，即使是根頁(yè)面或按F5刷新頁(yè)面也會(huì)顯示返回按鈕，點(diǎn)擊返回按鈕返回到指定頁(yè)面
  

        <ion-buttons slot="start">
            <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
        </ion-buttons>

導(dǎo)航

一

• 如下是最基本的路由配置

    { path: 'main', component: mainPage }

• 在html中和ts中導(dǎo)航到mainPage 方法如下

    <ion-button routerLink="/main">next page</ion-button>
    <ion-button [routerLink]="['/main']">next page</ion-button>

     constructor(public router: Router, public nav: NavController) {}
     next() {
        this.router.navigateByUrl('/main');
        this.router.navigate(['/main']);
        this.nav.navigateForward('/main');
     }

• 返回方式如下鸥咖。返回和上面的“navigate”方法動(dòng)畫是不一樣的

    goBack() {
        this.nav.pop(); // 返回到上一個(gè)頁(yè)面
        this.nav.back(); // 同上
        this.nav.navigateBack('/'); // 可以指定返回的頁(yè)面路徑
    }

二

• 如下是url帶參數(shù)的路由配置

    {path: 'detail/:id', component: DetailPage }

• 在html中和ts中導(dǎo)航到DetailPage 方法如下燕鸽，注意參數(shù)是在數(shù)組內(nèi)，不是方法內(nèi)

    <ion-button [routerLink]="['/detail', 6]">next page</ion-button>

     constructor(public router: Router) {}
     next() {
        this.router.navigate(['/detail, 6']);
     }

• 接收url參數(shù)兩種方法啼辣，注意這里用的是ActivatedRoute不是Router

  constructor(private route: ActivatedRoute) {
      const params = this.route.snapshot.params;
      console.log(params.id);
      
      this.route.params.subscribe(res => {
          console.log(res.id);
      });
  }

三

• 導(dǎo)航傳遞對(duì)象參數(shù)

this.router.navigateByUrl('/main?page=1&size=10');
this.router.navigate(['/main'], {queryParams: {page: 1, size: 10}});

注意這樣傳參是接收不到的
this.nav.navigateByUrl('/main', {queryParams: {page: 1, size: 10}});

• 接收參數(shù)兩種方法

    constructor(private route: ActivatedRoute) {
        const queryParams = this.route.snapshot.queryParams;
        console.log(queryParams);
        
        this.route.queryParams.subscribe(res => {
            console.log(res);
        });
    }

• 還有其他傳遞參數(shù)的方法啊研。如發(fā)布訂閱事件，使用Service鸥拧，全局對(duì)象党远，本地存儲(chǔ)等

其他

• 默認(rèn)情況下，應(yīng)用登錄成功后跳轉(zhuǎn)到主頁(yè)富弦，這時(shí)候點(diǎn)擊返回按鈕又返回到登錄頁(yè)沟娱，這是不科學(xué)的。所以需要使用如下NavController.navigateRoot方法設(shè)置主頁(yè)面為頂層頁(yè)面

constructor(public nav: NavController) {}
login() {
    this.nav.navigateRoot('/tabs/tab1');
}

• angular官網(wǎng)路由與導(dǎo)航章節(jié)還介紹跟多路由的高級(jí)功能腕柜，如有需要請(qǐng)閱讀官方文檔：

1. CanActivate路由入口守衛(wèi)：訪問頁(yè)面前執(zhí)行業(yè)務(wù)處理花沉，可以用于訪問鑒權(quán)，先判斷是否有權(quán)限訪問該頁(yè)面
2. CanDeactivate路由出口守衛(wèi)：離開頁(yè)面前執(zhí)行業(yè)務(wù)處理媳握，如用戶填寫了表單未保存碱屁，點(diǎn)擊了返回，可以提示是否保存
3. 路由動(dòng)畫：NavController在ionic3也有蛾找，ionic4繼續(xù)存在娩脾，就是封裝了返回/前進(jìn)動(dòng)畫等功能