uni-app 頁面棧

1. 前言

上小節(jié)我們講了 uni-app 路由的跳轉(zhuǎn)方式，有些同學可能還有一些疑問。同樣是跳轉(zhuǎn)到新的頁面，uni.navigateTo,uni.redirectTo 這些方法可以互相代替嗎？每種跳轉(zhuǎn)方式的區(qū)別又是什么呢？

在沒了解頁面棧之前，uni.navigateTo,uni.redirectTo 有時會亂用，反正都可以實現(xiàn)跳轉(zhuǎn)頁面的功能，但如果做一個需要連續(xù)跳轉(zhuǎn)3層以上頁面的功能，就很容易出現(xiàn)bug。

所以在做頁面開發(fā)之前，我們一定要先了解頁面棧的功能。這一節(jié)詳細解剖一下頁面棧。

2. 什么是頁面棧？

要搞清楚頁面棧概念，我們首先要了解“?！笔鞘裁匆馑迹趯W習數(shù)據(jù)結(jié)構(gòu)的時候，我們應該都了解過，棧是一種連續(xù)儲存的數(shù)據(jù)結(jié)構(gòu)，具有先進后出的性質(zhì)。

在古代，存儲貨物或供旅客住宿的地方叫做棧。引申到計算機領域中，就是暫時存儲數(shù)據(jù)的地方，這樣進棧、出棧的說法也比較容易理解了，進棧就是將數(shù)據(jù)添加到棧頂部，出棧就是將數(shù)據(jù)從棧頂部刪除。

但這樣說還是有點抽象，我們可以將棧想象成一個開口的盒子，將書一本一本的放進盒子中，先放進去的書總是會被后放進去的書壓在下面，這就是進棧的過程。那如果想拿出底部的書，需要先將頂部的書（也就是后放進的書）一本一本的拿出來，這是出棧的過程。這樣解釋棧的先進后出的性質(zhì)就比容易理解了。

頁面棧就是用來儲存頁面的棧，也有棧的特性。uni-app 是通過頁面棧來管理所有的頁面，我們可以將頁面棧理解為一個放頁面的容器。每次跳轉(zhuǎn)頁面，都會從這個容器中添加或者刪除頁面。

為了便于大家理解，我們來看一下示意圖：

3. 跳轉(zhuǎn)方式與頁面棧的變化

那每次跳轉(zhuǎn)頁面時，頁面棧是怎樣變化的呢？下面我們來分析一下使用各種跳轉(zhuǎn)方式頁面棧的變化過程。
我們可以用 getCurrentPages() 方法來驗證，getCurrentPages()方法可以獲取當前頁面棧的實例，展現(xiàn)頁面棧中頁面存儲的情況，返回的結(jié)果是數(shù)組形式。數(shù)組的第一個元素為初始化頁面，數(shù)組的最后一個元素為當前頁面。

3.1 初始化

首次打開應用時，會進行頁面的初始化，這時應用打開時顯示的第一個頁面（通常叫首頁）會進入頁面棧。

我們用getCurrentPages()來打印當前的頁面棧實例，在 pages/index/index.vue 文件 onLoad 方法中打印。
實例：

onLoad() {
	let pages = getCurrentPages()
	console.log('當前的頁面棧第一個頁面的路由為：',pages[0].route)
}

打印的結(jié)果：

當前的頁面棧第一個頁面的路由為： pages/index/index

3.2 打開新頁面

當調(diào)用 API uni.navigateTo 或者使用組件 <navigator open-type="navigate"/> 就會打開新的頁面，這時會有新的頁面進入頁面棧。

從 page1 頁面中打開 page2 頁面，頁面棧是下面這樣的形式：

3.3 頁面返回

當調(diào)用 API uni.navigateBack、使用組件 <navigator open-type="navigateBack"/> 或者點擊瀏覽器左上角的返回按鈕，還有點擊安卓物理back按鍵，都會進行頁面返回，返回到上一級頁面。

進行這些操作時，頁面會不斷的出棧，直至回到第一個頁面，也就是存放在頁面棧中最下面的頁面。

從 page2 頁面中返回到 page1 頁面，頁面棧是下面這樣的形式：

3.4 頁面重定向

當調(diào)用 API uni.redirectTo、使用組件 <navigator open-type="redirectTo"/>
就會進行頁面重定向。這時當前頁面會出頁面棧，新打開的頁面加入頁面棧。

從 page1 頁面中打開 page2 頁面，頁面棧是下面這樣的形式：
page1 會從頁面棧中刪除， page2 頁面加入頁面棧。

3.5 Tab 切換

當調(diào)用 API uni.switchTab、使用組件 <navigator open-type="switchTab"/>、點擊 Tab 頁面切換，就會進行 Tab 切換。這時所有的頁面都會從頁面棧內(nèi)刪除，只留下新的 Tab 頁面。

從 page1 頁面中打開 page2 頁面，再在 page2 頁面點擊 page3 這個 Tab 頁面，這時頁面棧是這樣變化的：
page1、page2 從頁面棧中刪除， page3 加入頁面棧。

3.6 重加載

調(diào)用 API uni.reLaunch、使用組件 <navigator open-type="reLaunch"/>，就會進行頁面重加載。這時頁面會全部出棧，只留下新的頁面。

當從 page1 頁面打開 page2 頁面，再在 page2 頁面重加載到 page3 頁面。頁面棧的表現(xiàn)與 Tab 切換是一樣的。

Tips：

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

4. 小結(jié)

了解了棧的含義，頁面棧也就比較容易理解了，頁面棧就是用來存放頁面的棧。本節(jié)課程我們主要學習了使用各種跳轉(zhuǎn)方式時頁面棧是如何變化的，本節(jié)課程的需要掌握的重點如下：

• 了解頁面棧的含義；
• 掌握使用各種跳轉(zhuǎn)方式時，頁面棧的變化過程；
• 了解如何獲取頁面棧的實例。