說(shuō)明：由于官方文檔還處于bate階段寝凌，很多東西實(shí)際上沒(méi)有講清楚也沒(méi)有完全解釋?zhuān)@樣造成困擾，先從最基本的跳轉(zhuǎn)頁(yè)面來(lái)講解吧。
1、引入route并新建頁(yè)面：
ionic4 與前輩們最大的不同就是通過(guò)angular引入了route拗窃，這樣每次跳轉(zhuǎn)的時(shí)候只需要直接跳轉(zhuǎn)對(duì)應(yīng)的路由地址就可以了，給了路由器上的解耦蔓榄，也解決了原來(lái)的RXjs與Events的子頁(yè)面反復(fù)跳轉(zhuǎn)重復(fù)添加監(jiān)聽(tīng)問(wèn)題【挖坑并炮，具體操作等后面進(jìn)一步深入研究】。通過(guò)翻閱源碼甥郑，我們看到：
源碼階段直接使用rxjs監(jiān)聽(tīng)load跳轉(zhuǎn)分配路由逃魄，通過(guò)導(dǎo)入父路由或者根路由自帶的注解和路由本身來(lái)完成類(lèi)加載。ionic4在這里直接使用的是angular的源碼澜搅。
新建頁(yè)面：
通過(guò)在cmd上輸入 ionic g 我們進(jìn)入一串選項(xiàng)：
然后選擇page：
輸入新建route的名稱(chēng)即可伍俘，我輸入的是detail，作為測(cè)試跳轉(zhuǎn)的頁(yè)面勉躺。
2癌瘾、Button直接點(diǎn)擊跳轉(zhuǎn)頁(yè)面：
分析源碼：
發(fā)現(xiàn)button實(shí)際上是繼承 StencliComponets.IonButton ，點(diǎn)擊進(jìn)入：
我們找到了 'href' 屬性這上面有明確的提示饵溅，為了強(qiáng)調(diào)妨退，我全部再拷貝一份：
interface IonButton {
/**
* The type of button. Possible values are: `"button"`, `"bar-button"`.
*/
'buttonType': string;
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
*/
'color': Color;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
'disabled': boolean;
/**
* Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
*/
'expand': 'full' | 'block';
/**
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
*/
'fill': 'clear' | 'outline' | 'solid' | 'default';
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href': string;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
'mode': Mode;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection': RouterDirection;
/**
* The button shape. Possible values are: `"round"`.
*/
'shape': 'round';
/**
* The button size. Possible values are: `"small"`, `"default"`, `"large"`.
*/
'size': 'small' | 'default' | 'large';
/**
* If true, activates a button with a heavier font weight.
*/
'strong': boolean;
/**
* The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`
*/
'type': 'submit' | 'reset' | 'button';
}
也就是在代碼里面如此寫(xiě)：
<ion-button block href="/detail">進(jìn)入頁(yè)面</ion-button>
那么我們就可以在點(diǎn)擊此button過(guò)后即可跳轉(zhuǎn)到剛才建立的detail頁(yè)面去了
3、自定義跳轉(zhuǎn)
懷舊時(shí)期的ionic 是 navcontroller.push(component) 進(jìn)行跳轉(zhuǎn)指定頁(yè)面蜕企，那么我們新版本如何跳轉(zhuǎn)呢咬荷？
首先看看官方文檔：
官方文檔.png
官網(wǎng)提示用NavController這個(gè)類(lèi)來(lái)跳轉(zhuǎn)頁(yè)面，然而當(dāng)我翻閱源碼：
/**
@params:
@url: 路由地址
@animated: 是否頁(yè)面跳轉(zhuǎn)動(dòng)畫(huà)
@extras: 傳遞頁(yè)面參數(shù)
*/
// 進(jìn)入一個(gè)頁(yè)面
goForward(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras): Promise<boolean>;
// 返回一個(gè)頁(yè)面
goBack(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras): Promise<boolean>;
// 進(jìn)入根頁(yè)面
goRoot(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras): Promise<boolean>;
使用這三個(gè)方法幸乒，可以直接進(jìn)入我們想跳轉(zhuǎn)進(jìn)入的頁(yè)面，于是我們進(jìn)入頁(yè)面：
//////////////////////////////home.page.html/////////////////////////////////////////
<ion-button block (click)="onClick()">進(jìn)入頁(yè)面</ion-button>
////////////////////////////home.page.ts//////////////////////////////
constructor(public nav:NavController){}
onClick(){
this.nav.goForward("/detail")
}
這樣就可以進(jìn)入到detail頁(yè)面了唇牧，非常簡(jiǎn)單罕扎，帶參數(shù)的話，只用填充params就可以了丐重，源代碼還沒(méi)注釋?zhuān)@里我把注釋加上了腔召，方便查看。
2018年 12 月 3日 更新
說(shuō)明：現(xiàn)在使用框中的三中方法進(jìn)行頁(yè)面跳轉(zhuǎn)弥臼，于是有：
//////////////////////////////home.page.html/////////////////////////////////////////
<ion-button block (click)="onClick()">進(jìn)入頁(yè)面</ion-button>
////////////////////////////home.page.ts//////////////////////////////
constructor(public nav:NavController){}
onClick(){
this.nav.navigateForward("/detail")
}
特別的宴咧，setIntent(intent:NavIntent,animated?:boolean):void; 即可以自定義命令形式的跳轉(zhuǎn)，有點(diǎn)類(lèi)似于 Android原生:
fun click(){
Intent().apply{
setClass(context,xxx.java.class)
.....
}
}
Intent 跳轉(zhuǎn)頁(yè)面的使用方式為：
//////////////////////////////home.page.html/////////////////////////////////////////
<ion-button block routerLink="/detail" (click)="onClick()">進(jìn)入頁(yè)面</ion-button>
////////////////////////////home.page.ts//////////////////////////////
constructor(public nav:NavController){}
onClick(){
this.nav.setIntent(NavIntent.Forward,true)
}
