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