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');

ionic4 路由跳转、ionic4 路由跳转传值 NavController 返回上一页 、NavController 回到根的更多相关文章

  1. js 实现返回上一页和刷新等页面跳转功能

    原文 出处http://www.2cto.com/kf/201111/109821.html 1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go ...

  2. js 页面之间的跳转、传参以及返回上一页

    js实现html 页面之间的跳转传参以及返回上一页的相关知识点 一.页面之间的跳转传参 1.在页面之间跳转的方式有两种: window.location.href="test.html?nu ...

  3. js 返回上一页和刷新以及页面跳转

    1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forw ...

  4. Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能

    .模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...

  5. js页面跳转(含框架跳转)整理

    js方式的页面跳转1.window.location.href方式    <script language="javascript" type="text/java ...

  6. vue 获取跳转上一页组件信息

    项目中有一需求,需要根据不同的页面路径url跳转进行不同的操作,首先需要获得上一页面的url,利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息,然后给 next 传 ...

  7. js中实现页面跳转(返回前一页、后一页)

    一:JS 重载页面,本地刷新,返回上一页 代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a ...

  8. vue路由的钩子函数和跳转

    首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改.一些需要登录才能调整页面的重定向功能. beforeEach主要有3个参数to,from,next. t ...

  9. Vue-router路由判断页面未登录跳转到登录页面

    router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth) ...

随机推荐

  1. Luogu-P1450 [HAOI2008]硬币购物-完全背包+容斥定理

    Luogu-P1450 [HAOI2008]硬币购物-完全背包+容斥定理 [Problem Description] 略 [Solution] 上述题目等价于:有\(4\)种物品,每种物品有\(d_i ...

  2. linux 的常用命令(1)

    1.关于ls [选项][目录名] -a  列出包括.a开头的隐藏文件的所有文件-A  通-a,但不列出"."和".."-l  列出文件的详细信息-c  根据ct ...

  3. 牛客NOIP暑期七天营-普及组1 解题报告

    A 对于\(100\%\),直接开个桶统计即可.入门题目. 代码:https://ac.nowcoder.com/acm/contest/view-submission?submissionId=41 ...

  4. 移动App性能评测与优化-Android内存测试 ,DVM原理

    常见的测试方法包括Monkey/UIAutomator类的常规压力测试,大数据/操作的峰值压力测试,长时间运行的稳定性测试等. 前提: 测试准备:版本是纯净版本,不应该附加多余的log和调试用组件. ...

  5. final修饰的变量引用不能变还是对象不可变

    两种情况:如果是基本数据类型,被final修饰的变量一旦初始化就不能改变:如果是引用数据类型的变量,初始化之后不能指向另外一个对象. 基本数据类型: package cn.yqg.day2; publ ...

  6. tcp的三次握手和四次挥手转自https://www.jianshu.com/p/d3725391af59

    三次握手(three-way handshaking) 1.背景:TCP位于传输层,作用是提供可靠的字节流服务,为了准确无误地将数据送达目的地,TCP协议采纳三次握手策略. 2.原理: 1)发送端首先 ...

  7. HP DL388 Gen9 Raid P440ar 工具

    HP DL388 Gen9 服务器raid升级P440ar,原先的hpacucli 不能使用,新的工具为hpssacl hpssacli-2.10-14.0.x86_64.rpm 下载地址:wget ...

  8. tomcat 启动项目超时问题

    在开发工具中打开tomcat(F3),Timesouts下设置增加start秒数,然后保存重启项目.

  9. 2017.10.6 国庆清北 D6T2 同余方程组

    题目描述 求关于x 的同余方程组 x%a1 = b1 x%a2 = b2 x%a3 = b3 x%a4 = b4 的大于等于0 的最小整数解. 输入输出格式 输入格式: 一行8 个整数,表示a1; b ...

  10. 《挑战30天C++入门极限》入门教程:C++中的const限定修饰符

        入门教程:C++中的const限定修饰符 const修饰符可以把对象转变成常数对象,什么意思呢? 意思就是说利用const进行修饰的变量的值在程序的任意位置将不能再被修改,就如同常数一样使用! ...