您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

uni-app 页面栈

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

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

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

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

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

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

栈就是用来储存的栈,也有栈的特性。 是通过栈来管理所有的,我们可以将栈理解为放的容器。每次面,都会从这个容器中或者。

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

那每次面时,栈是怎样变化的呢?下面我们来分析一下使用各种方式栈的变化过程。
我们可以用 getCurrentPages() 来验证,getCurrentPages()可以栈的实例,展现栈中存储的情况,返回的结果是数组形式。数组的第元素为初始化,数组的最后元素为。

首次打开应用时,会进行的初始化,这时应用打开时的第(通常叫)会进入栈。

我们用getCurrentPages()来打印当前的栈实例,在 pages/index/index.vue onLoad 中打印。
实例:

onLoad() {
	let pages = getCurrentPages()
	console.log('当前的栈第的路由为:',pages[].route)
}

打印的结果:

当前的栈第的路由为: pages/index/index

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

从 page1 中打开 page2 ,栈是下面这样的形式:

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

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

从 page2 中返回到 page1 ,栈是下面这样的形式:

当 API uni.redirectTo、使用组件 <navigator open-type="redirectTo"/>
就会进行。这时会出栈,新打开的加入栈。

从 page1 中打开 page2 ,栈是下面这样的形式:
page1 会从栈中, page2 加入栈。

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

从 page1 中打开 page2 ,再在 page2 点击 page3 这个 Tab ,这时栈是这样变化的:
page1、page2 从栈中, page3 加入栈。

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

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

Tips

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


联系我
置顶