ionic4 路由跳转、ionic4 路由跳转传值 NavController 返回上一页 、NavController 回到根
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 回到根的更多相关文章
- js 实现返回上一页和刷新等页面跳转功能
原文 出处http://www.2cto.com/kf/201111/109821.html 1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go ...
- js 页面之间的跳转、传参以及返回上一页
js实现html 页面之间的跳转传参以及返回上一页的相关知识点 一.页面之间的跳转传参 1.在页面之间跳转的方式有两种: window.location.href="test.html?nu ...
- js 返回上一页和刷新以及页面跳转
1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forw ...
- Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能
.模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...
- js页面跳转(含框架跳转)整理
js方式的页面跳转1.window.location.href方式 <script language="javascript" type="text/java ...
- vue 获取跳转上一页组件信息
项目中有一需求,需要根据不同的页面路径url跳转进行不同的操作,首先需要获得上一页面的url,利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息,然后给 next 传 ...
- js中实现页面跳转(返回前一页、后一页)
一:JS 重载页面,本地刷新,返回上一页 代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a ...
- vue路由的钩子函数和跳转
首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改.一些需要登录才能调整页面的重定向功能. beforeEach主要有3个参数to,from,next. t ...
- Vue-router路由判断页面未登录跳转到登录页面
router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth) ...
随机推荐
- Luogu-P1450 [HAOI2008]硬币购物-完全背包+容斥定理
Luogu-P1450 [HAOI2008]硬币购物-完全背包+容斥定理 [Problem Description] 略 [Solution] 上述题目等价于:有\(4\)种物品,每种物品有\(d_i ...
- linux 的常用命令(1)
1.关于ls [选项][目录名] -a 列出包括.a开头的隐藏文件的所有文件-A 通-a,但不列出"."和".."-l 列出文件的详细信息-c 根据ct ...
- 牛客NOIP暑期七天营-普及组1 解题报告
A 对于\(100\%\),直接开个桶统计即可.入门题目. 代码:https://ac.nowcoder.com/acm/contest/view-submission?submissionId=41 ...
- 移动App性能评测与优化-Android内存测试 ,DVM原理
常见的测试方法包括Monkey/UIAutomator类的常规压力测试,大数据/操作的峰值压力测试,长时间运行的稳定性测试等. 前提: 测试准备:版本是纯净版本,不应该附加多余的log和调试用组件. ...
- final修饰的变量引用不能变还是对象不可变
两种情况:如果是基本数据类型,被final修饰的变量一旦初始化就不能改变:如果是引用数据类型的变量,初始化之后不能指向另外一个对象. 基本数据类型: package cn.yqg.day2; publ ...
- tcp的三次握手和四次挥手转自https://www.jianshu.com/p/d3725391af59
三次握手(three-way handshaking) 1.背景:TCP位于传输层,作用是提供可靠的字节流服务,为了准确无误地将数据送达目的地,TCP协议采纳三次握手策略. 2.原理: 1)发送端首先 ...
- HP DL388 Gen9 Raid P440ar 工具
HP DL388 Gen9 服务器raid升级P440ar,原先的hpacucli 不能使用,新的工具为hpssacl hpssacli-2.10-14.0.x86_64.rpm 下载地址:wget ...
- tomcat 启动项目超时问题
在开发工具中打开tomcat(F3),Timesouts下设置增加start秒数,然后保存重启项目.
- 2017.10.6 国庆清北 D6T2 同余方程组
题目描述 求关于x 的同余方程组 x%a1 = b1 x%a2 = b2 x%a3 = b3 x%a4 = b4 的大于等于0 的最小整数解. 输入输出格式 输入格式: 一行8 个整数,表示a1; b ...
- 《挑战30天C++入门极限》入门教程:C++中的const限定修饰符
入门教程:C++中的const限定修饰符 const修饰符可以把对象转变成常数对象,什么意思呢? 意思就是说利用const进行修饰的变量的值在程序的任意位置将不能再被修改,就如同常数一样使用! ...