ionic中的路由跳轉(zhuǎn)是實(shí)打?qū)嵉难永m(xù)了Angular中的路由跳轉(zhuǎn)方式
ionic g page product
ionic g page list
新創(chuàng)建兩個(gè)組件，angular普通的方式跳轉(zhuǎn)路由直接可以使用[routerLink]去進(jìn)行跳轉(zhuǎn)
<ion-button [routerLink]="[ '/product']">跳轉(zhuǎn)</ion-button>
如果希望在跳轉(zhuǎn)至product頁面后點(diǎn)擊返回按鈕弓柱，繼續(xù)回到list頁面，可以設(shè)置默認(rèn)跳轉(zhuǎn)鏈接
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/product" text="返回"></ion-back-button>
</ion-buttons>
<ion-title>產(chǎn)品</ion-title>
</ion-toolbar>
</ion-header>
但是在ionic中箱沦，路由的跳轉(zhuǎn)也是可以進(jìn)行值傳遞的，比如：我們希望在list頁面跳轉(zhuǎn)至product中的過程中，傳遞aid過去，那么做法和angular差不多以清。
<ion-button [routerLink]="[ '/my-page']" [queryParams]="{aid:'1234'}">跳轉(zhuǎn)</ion-button>
接收值的時(shí)候需要導(dǎo)入import { ActivatedRoute } from '@angular/router';，使用ActivatedRoute模塊
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
constructor(public route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams.subscribe((data) => {
console.log(data);
})
}
同時(shí)崎逃，還提供了一種方法進(jìn)行跳轉(zhuǎn)掷倔，使用NavController去跳轉(zhuǎn)至上一頁
Ionic4.x 中從 tabs 切換頁面跳轉(zhuǎn)到其他頁面，使用 ion-back-button 返回的話个绍，默認(rèn)都會(huì)返回 到 tab1 頁面勒葱。如果我們想從那個(gè) tab 頁面跳轉(zhuǎn)過去就返回到指定的 tab 頁面的話，這時(shí)候就 要用到 NavController 里面提到的 back 方法巴柿。
import { NavController } from '@ionic/angular';
constructor(public nav:NavController) { }
this.nav.back();
this.nav.navigateBack('/tabs/tab3');
目標(biāo)頁面的模板代碼：
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="goBack()">
<ion-icon slot="icon-only" name="arrow-back"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>產(chǎn)品</ion-title>
</ion-toolbar>
</ion-header>
目標(biāo)頁面的ts代碼：
import { NavController } from '@ionic/angular';
constructor(public route: ActivatedRoute, public nav: NavController) { }
ngOnInit() {
this.route.queryParams.subscribe((data) => {
console.log(data);
});
console.log(window.history);
}
goBack() { this.nav.navigateBack('/tabs/tab2'); }
