ionic4 路由跳转

1.普通路由跳转

<ion-button [routerLink]="['/pinfo']">
	跳转到详情
</ion-button>

<ion-header>
	<ion-toolbar>
		<ion-buttons slot="start">
			<ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
		</ion-buttons>
		<ion-title>pinfo</ion-title>
	</ion-toolbar>
</ion-header>

2.路由跳转传值

<ion-button [routerLink]="['/pinfo']" [queryParams]="{aid:'1234'}">
	跳转到详情并传值
</ion-button>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
	selector: 'app-pinfo',
	templateUrl: './pinfo.page.html',
	styleUrls: ['./pinfo.page.scss'],
})
export class PinfoPage implements OnInit {
	constructor(public route:ActivatedRoute) { }
	ngOnInit() {
		this.route.queryParams.subscribe((data)=>{
		console.log(data);
		})
	}
}

图解

3.NavController 返回上一页

Ionic4.x 中从 tabs 切换页面跳转到其他页面，使用 ion-back-button 返回的话，默认都会返回到 tab1 页面。如果我们想从那个 tab 页面跳转过去就返回到指定的 tab 页面的话，这时候就要用到 NavController 里面提到的 back 方法。

import { NavController } from '@ionic/angular';
constructor(public nav:NavController) { }
this.nav.back();
this.nav.navigateBack('/tabs/tab3');

完整代码

<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>pinfo</ion-title>
	</ion-toolbar>
</ion-header>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NavController } from '@ionic/angular';

@Component({
	selector: 'app-pinfo',
	templateUrl: './pinfo.page.html',
	styleUrls: ['./pinfo.page.scss'],
})

export class PinfoPage implements OnInit {
	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/tab3');
	}
}

4.NavController 回到根

import { NavController } from '@ionic/angular';
constructor(public nav:NavController) { }
this.nav.navigateRoot('/tabs/tab3');