ionic4.X中的路由跳转以及NavController

ionic中的路由跳转是实打实的延续了Angular中的路由跳转方式

ionic g page product

ionic g page list

新创建两个组件，angular普通的方式跳转路由直接可以使用[routerLink]去进行跳转

  <ion-button [routerLink]="[ '/product']">跳转</ion-button>

如果希望在跳转至product页面后点击返回按钮，继续回到list页面，可以设置默认跳转链接

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/product" text="返回"></ion-back-button>
    </ion-buttons>
    <ion-title>产品</ion-title>
  </ion-toolbar>
</ion-header>

但是在ionic中，路由的跳转也是可以进行值传递的，比如：我们希望在list页面跳转至product中的过程中，传递aid过去，那么做法和angular差不多。

  <ion-button [routerLink]="[ '/my-page']" [queryParams]="{aid:'1234'}">跳转</ion-button>

接收值的时候需要导入import { ActivatedRoute } from '@angular/router';，使用ActivatedRoute模块

  import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';

  constructor(public route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe((data) => { 
      console.log(data); 
    })
  }

同时，还提供了一种方法进行跳转，使用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>产品</ion-title>
  </ion-toolbar>
</ion-header>

目标页面的ts代码：

  import { NavController } from '@ionic/angular';

  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/tab2'); }