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

Ionic4--路由跳转相关推荐

flutter中的路由跳转
在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级在前面的例子中,当从Home.dar ...
vue 函数路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...
生产路由跳转报错找不到js路径问题
问题描述:点击路由跳转报错解决方案:问题原因是点击路由找不到js路径,修改打包配置为绝对路径,部署到tomcat根目录转载于:https://www.cnblogs.com/lcosima/p/9 ...
Vue el-menu高亮设置及点击菜单项实现路由跳转
el-menu相关知识记录一.el-menu菜单项高亮设置二.点击菜单项实现路由跳转 2021/11/13 知识点记录一.el-menu菜单项高亮设置 el-menu高亮是通过:default- ...
写在方法中的路由跳转
场景:login页面点击登陆按钮,登陆成功后,进入home页面:(当然,这里就不能用Link跳转了) 问题:history的报错: 解决:需要引入react-router-dom中的withRoute ...
一个方法搞定安卓路由跳转
前言团队分模块开发在大项目上很常见,但项目组A想跳转到一个项目组B负责的Activity,此时若B未创建该Activity,则会影响项目进度,由此,安卓路由跳转出现了原理原理比较简单,大家都知道 ...
vue面向切面_vue：在路由跳转中使用拦截器
1:首先在路由对象中的某一个具体的路由对象加这样一个属性 meta: { requireAuth:true } 2:然后在main.js中添加这段代码 router.beforeEach((to, ...
Angular中使用JS实现路由跳转、动态路由传值、get方式传值
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...

Ionic4--路由跳转

1、普通路由跳转

2、路由跳转传值

3、NavController返回上一页

4、NavController 回到根

Ionic4--路由跳转相关推荐

最新文章

热门文章