ionic4/angular路由配置與導(dǎo)航傳參

前言

路由配置

  • 常見的路由配置如下代碼钮糖,配置說明看代碼上的注釋梅掠,后面還有重難點(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');
}
  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)畫等功能
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市打毛,隨后出現(xiàn)的幾起案子柿赊,更是在濱河造成了極大的恐慌俩功,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件碰声,死亡現(xiàn)場(chǎng)離奇詭異诡蜓,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)胰挑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門蔓罚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人瞻颂,你說我怎么就攤上這事豺谈。” “怎么了贡这?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵茬末,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我盖矫,道長(zhǎng)丽惭,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任辈双,我火速辦了婚禮责掏,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘辐马。我一直安慰自己拷橘,他們只是感情好局义,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布喜爷。 她就那樣靜靜地躺著,像睡著了一般萄唇。 火紅的嫁衣襯著肌膚如雪檩帐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天另萤,我揣著相機(jī)與錄音湃密,去河邊找鬼。 笑死四敞,一個(gè)胖子當(dāng)著我的面吹牛泛源,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播忿危,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼达箍,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了铺厨?” 一聲冷哼從身側(cè)響起缎玫,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤硬纤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后赃磨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體筝家,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年邻辉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了溪王。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡恩沛,死狀恐怖在扰,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情雷客,我是刑警寧澤芒珠,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站搅裙,受9級(jí)特大地震影響皱卓,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜部逮,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一娜汁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧兄朋,春花似錦掐禁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至峡扩,卻和暖如春蹭越,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背教届。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工响鹃, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人案训。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓买置,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親强霎。 傳聞我的和親對(duì)象是個(gè)殘疾皇子忿项,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361