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. html相对字体

    文章:使用 rem 设置文字大小 使用rem作为字体单位.

  2. typescript 模块

    模块:模块可以帮助开发者将代码分割为重用的单元.开发者可以自己决定将模块中的哪些资源(类,方法,变量)暴露出去供外部使用,哪些资源只在模块内使用 在ts里面,一个文件就是一个模块,并没有什么特殊的标识 ...

  3. 使用LM386制作Arduino音乐播放器

    在我们的项目中添加声音或音乐总是会使其看起来更酷一些,听上去更有吸引力.特别是如果您使用的是Arduino开发板,并且有很多空余的引脚,只需要添加一个SD卡模块和一个普通的扬声器即可轻松添加音效.在本 ...

  4. destoon模板存放调取规则

    一.模板存放及调用规则      模板存放于系统 template 目录,template 目录下的一个目录例如 template/default/ 即为一套模板 模板文件以 .htm 为扩展名,可直 ...

  5. 微信小程序WEB工具安装

    1.下载工具链接:http://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715 2.安装完成后图片样式如图: 3.新 ...

  6. stm32中使用cubemx配置freertos的信号量大小

    在配置freertos的情况下,cubemx会自动计算每个任务.信号,队列和软件定时器的使用堆栈大小,因此要合理规划 信号量默认是88byte 任务根据设定来计算,我默认配置是128,则最终是624b ...

  7. 单片机开发之C语言编程基本规范

    为了提高源程序的质量和可维护性,从而最终提高软件产品生产力,特编写此规范.本标准规定了程序设计人员进行程序设计时必须遵循的规范.本规范主要针对单片机编程语言和08编译器而言,包括排版.注释.命名.变量 ...

  8. Storm 安装时 部分supervisor启动成功,并不在web ui上显示

    今天帮公司搭建集群时,发现启动了三个Supervisor 发现只有一个显示在Web UI 上. 于是我就简单地检查了下另外两台没有启动的 storm supervisor的日志, 发现没有报出什么异常 ...

  9. 3 Ways to Force Unmount in Linux Showing “device is busy”

    3 Ways to Force Unmount in Linux Showing “device is busy” Updated August 8, 2019By Bobbin ZachariahL ...

  10. java.security KeyPairGenerator

    KeyPairGenerator 类用于生成公钥和私钥对.密钥对生成器是使用 getInstance 工厂方法(返回一个给定类的实例的静态方法)构造的. 特定算法的密钥对生成器可以创建能够与此算法一起 ...