ionic 页面跳转 pop()以及 popToRoot() 用法

页面想要“跳来跳去”的需要借助“工具”才能实现，就好像我们要攀岩需要有绳子一样，当前的“绳子”就是我们出场率很高的导航控制器NavController，首先需要在在页面顶端引入

 

import{ NavController }from‘ionic-angular’

 

项目中的实际应用情况见下图：

只是引用组件的话，我们的导航控制器还不能使用，必须在构造器中初始化组件才能进行下一步。

//构造器中初始化组件constructor(public navCtrl: NavController)

 {//do some thing// or// don`t}

 

很简单不是么？不过这只是开始，世界上唯一不变的就是变化，具体使用情境的逻辑或是客户的异想天开，总会给我们带来各种各样的奇葩体验。后面就是进阶装B阶段，都闪开！

假设一种情景，我们的页面已经进入的足够深，例如:

列表A --> 列表A2 --> 列表A23--> 列表A235 --> .... --> 内容

ionic3的默认方法只是返回上一级，如果我们想从内容返回至列表A，必须很麻烦的从内容逐级点返回按钮来返回上一级直至列表A，有多少层就要点击多少次，要是路径足够深估计会点到内伤吐血，这样的设计会大幅度降低用户体验。有没有什么方法可以从内容直接返回至列表A呢？

回答是肯定的，万物皆有道。万物皆有法。道法文档，才能一切皆有可能。方法popToRoot就是这样一个方便的神器，它可以直接让我们返回至导航的根位置，而不管它距离根有多远。关于这货的使用方法我摘抄自ionic3官方文档NavController部分。

 

opts决定了在跳转时候的过渡效果，在完成功能最高权重思想的指引下下，这个参数我们可以无视。popToRoot方法在具体项目中的运用:

 

另一种需求：例如，我们有三个tabs，在tabs3下面的的深层路径组件使用popToRoot只能让我们直接返回到tabs3的页面。就像下图所示。

这样的原因是因为我们在tab.html中已经设置了每个root。所以我们的popToRoot只能让我们返回至各自的root.

 

我们会经常遇见这种情况，就是我们需要从tabs3下面的深层次组件需要跳转到tabs1的根。这个需求是popToRoot无法满足的。例如在项目中我的tabs3是设置选项，如果不是登录状态的话有些设置是不能操作的，这个时候需要提示用户登录，在提示界面如果用户不点击登录而是点击返回。在返回事件中使用popToRoot只会让我们返回tabs3页面，这恰恰不是我们需要的，我们需要的是用户直接返回至tabs1的首页。看来还要想另外的办法。  

 

万事不决找文档。其实目前问题已经转向了，并不是导航NavController的功能范畴了，tabs的加入让问题开始变的扑朔迷离，看来我们需要从tabs相关文档开始查阅。

功夫不负有心人，在ionic3官方文档tabs部分中我们找到了一下的这句话:

 

You can also switch tabs from a child component by calling select() on the parent view using the NavController instance. For example, assuming you have a TabsPage component, you could call the following from any of the child components to switch to TabsRoot3:  

select方法的参数是tabs的index值，从零开始计算。

这个方法可以让我们从一个组件中直接跳转到不同的tabs根位置。例如我的项目中是这样用的：