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>

//代碼發送
this.navController.navigateForward('/atten-stu-class',{
      queryParams: {
        name: name,
        type :"back"
      },
    });


//接收方接收參數
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返回上一頁

import { NavController } from '@ionic/angular'; 

constructor(public nav:NavController) { } 

this.nav.back(); 
this.nav.navigateBack('/tabs/tab3');

4、NavController 回到根

import { NavController } from '@ionic/angular'; 

constructor(public nav:NavController) { } 

this.nav.navigateRoot('/tabs/tab3');