跳到主要内容

uni-app 页面栈

1. 前言​

上小节我们讲了 uni-app 路由的跳转方式，有些同学可能还有一些疑问。同样是跳转到新的页面，uni.navigateTo,uni.redirectTo 这些方法可以互相代替吗？每种跳转方式的区别又是什么呢？

在没了解页面栈之前，uni.navigateTo,uni.redirectTo 有时会乱用，反正都可以实现跳转页面的功能，但如果做一个需要连续跳转3层以上页面的功能，就很容易出现bug。

所以在做页面开发之前，我们一定要先了解页面栈的功能。这一节详细解剖一下页面栈。

2. 什么是页面栈？​

要搞清楚页面栈概念，我们首先要了解“栈”是什么意思，在学习数据结构的时候，我们应该都了解过，栈是一种连续储存的数据结构，具有先进后出的性质。

在古代，存储货物或供旅客住宿的地方叫做栈。引申到计算机领域中，就是暂时存储数据的地方，这样进栈、出栈的说法也比较容易理解了，进栈就是将数据添加到栈顶部，出栈就是将数据从栈顶部删除。

但这样说还是有点抽象，我们可以将栈想象成一个开口的盒子，将书一本一本的放进盒子中，先放进去的书总是会被后放进去的书压在下面，这就是进栈的过程。那如果想拿出底部的书，需要先将顶部的书（也就是后放进的书）一本一本的拿出来，这是出栈的过程。这样解释栈的先进后出的性质就比容易理解了。

页面栈就是用来储存页面的栈，也有栈的特性。uni-app 是通过页面栈来管理所有的页面，我们可以将页面栈理解为一个放页面的容器。每次跳转页面，都会从这个容器中添加或者删除页面。

为了便于大家理解，我们来看一下示意图：

3. 跳转方式与页面栈的变化​

那每次跳转页面时，页面栈是怎样变化的呢？下面我们来分析一下使用各种跳转方式页面栈的变化过程。

我们可以用 getCurrentPages() 方法来验证，getCurrentPages()方法可以获取当前页面栈的实例，展现页面栈中页面存储的情况，返回的结果是数组形式。数组的第一个元素为初始化页面，数组的最后一个元素为当前页面。

3.1 初始化​

首次打开应用时，会进行页面的初始化，这时应用打开时显示的第一个页面（通常叫首页）会进入页面栈。

我们用getCurrentPages()来打印当前的页面栈实例，在 pages/index/index.vue 文件 onLoad 方法中打印。

实例：

onLoad() {
    let pages = getCurrentPages()
    console.log('当前的页面栈第一个页面的路由为：',pages[0].route)
}

打印的结果：

当前的页面栈第一个页面的路由为： pages/index/index

3.2 打开新页面​

当调用 API uni.navigateTo 或者使用组件 <navigator open-type="navigate"/> 就会打开新的页面，这时会有新的页面进入页面栈。

从 page1 页面中打开 page2 页面，页面栈是下面这样的形式：

3.3 页面返回​

当调用 API uni.navigateBack、使用组件 <navigator open-type="navigateBack"/> 或者点击浏览器左上角的返回按钮，还有点击安卓物理back按键，都会进行页面返回，返回到上一级页面。

进行这些操作时，页面会不断的出栈，直至回到第一个页面，也就是存放在页面栈中最下面的页面。

从 page2 页面中返回到 page1 页面，页面栈是下面这样的形式：

3.4 页面重定向​

当调用 API uni.redirectTo、使用组件 <navigator open-type="redirectTo"/>

就会进行页面重定向。这时当前页面会出页面栈，新打开的页面加入页面栈。

从 page1 页面中打开 page2 页面，页面栈是下面这样的形式：

page1 会从页面栈中删除， page2 页面加入页面栈。

3.5 Tab 切换​

当调用 API uni.switchTab、使用组件 <navigator open-type="switchTab"/>、点击 Tab 页面切换，就会进行 Tab 切换。这时所有的页面都会从页面栈内删除，只留下新的 Tab 页面。

从 page1 页面中打开 page2 页面，再在 page2 页面点击 page3 这个 Tab 页面，这时页面栈是这样变化的：

page1、page2 从页面栈中删除， page3 加入页面栈。

3.6 重加载​

调用 API uni.reLaunch、使用组件 <navigator open-type="reLaunch"/>，就会进行页面重加载。这时页面会全部出栈，只留下新的页面。

当从 page1 页面打开 page2 页面，再在 page2 页面重加载到 page3 页面。页面栈的表现与 Tab 切换是一样的。

Tips：

  • navigateTo, redirectTo 只能打开非 Tab 页面。
  • switchTab 只能打开 Tab 页面。
  • reLaunch 可以打开任意页面。

4. 小结​

了解了栈的含义，页面栈也就比较容易理解了，页面栈就是用来存放页面的栈。本节课程我们主要学习了使用各种跳转方式时页面栈是如何变化的，本节课程的需要掌握的重点如下：

  • 了解页面栈的含义；
  • 掌握使用各种跳转方式时，页面栈的变化过程；
  • 了解如何获取页面栈的实例。