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');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。