• 路由方式
  • 頁面棧
  • getCurrentPages()
  • 路由方式

路由方式

頁面棧

框架以棧的形式維護了當前的所有頁面。 當發(fā)生路由切換的時候，頁面棧的表現(xiàn)如下：

創(chuàng)新互聯(lián)自2013年起，先為防城等服務建站，防城等地企業(yè)，進行企業(yè)商務咨詢服務。為防城企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

路由方式	頁面棧表現(xiàn)
初始化	新頁面入棧
打開新頁面	新頁面入棧
頁面重定向	當前頁面出棧，新頁面入棧。
頁面返回	頁面不斷出棧，直到目標返回頁。
Tab 切換	頁面全部出棧，只留下新的 Tab 頁面。

getCurrentPages()

getCurrentPages() 函數(shù)用于獲取當前頁面棧的實例，以數(shù)組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當前頁面。

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

頁面切換路徑過多，詳細示例請在開發(fā)者工具中的控制臺查看。

Tip：

不要嘗試修改頁面棧，會導致路由以及頁面狀態(tài)錯誤。

路由方式

對于路由的觸發(fā)方式以及頁面生命周期函數(shù)如下：

路由方式	觸發(fā)時機	路由前頁面	路由后頁面
初始化	智能小程序打開的第一個頁面		onLoad, onShow
打開新頁面	調用 API swan.navigateTo 或使用組件 < navigator open-type=”navigateTo”/ >	onHide	onLoad, onShow
頁面重定向	調用 API swan.redirectTo 或使用組件 < navigator open-type=”redirectTo”/ >	onUnload	onLoad, onShow
Tab 切換	調用 API swan.switchTab 或使用組件 < navigator open-type=”switchTab”/ > 或用戶切換 Tab		各種情況請參考下表
頁面返回	調用 API swan.navigateBack 或使用組件 < navigator open-type=”navigateBack”/ > 或用戶按左上角返回按鈕	onUnload	onShow
重啟動	調用 API swan.reLaunch 或使用組件 < navigator open-type=”reLaunch”/ >	onUnload	onLoad, onShow

同時點擊頁面重定向和重啟動跳轉到下一個頁面后無法返回。

Tab 切換對應的生命周期（以 A、B 頁面為 Tabbar 頁面，C 是從 A 頁面打開的頁面，D 頁面是從 C 頁面打開的頁面為例）：

當前頁面	路由后頁面	觸發(fā)的生命周期（按順序）
A	A	Nothing happend
A	B	A.onHide(), B.onLoad(), B.onShow()
A	B（再次打開）	A.onHide(), B.onShow()
C	A	C.onUnload(), A.onShow()
C	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D（從轉發(fā)進入）	A	D.onUnload(), A.onLoad(), A.onShow()
D（從轉發(fā)進入）	B	D.onUnload(), B.onLoad(), B.onShow()

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

建議在開發(fā)者工具中的控制臺查看，工具與真機略有差異，以真機的生命周期為準。

說明：

• navigateTo、redirectTo 只能打開非 tabBar 頁面。
• switchTab 只能打開 tabBar 頁面。
• reLaunch 可以打開任意頁面。
• 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar 。
• reLaunch、redirectTo、navigateTo 可在需要跳轉的應用內頁面路徑后帶參數(shù)。參數(shù)與路徑之間使用 ? 分隔，參數(shù)鍵與參數(shù)值用 = 相連，不同參數(shù)用 & 分隔；如path?key=value&key2=value2，如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數(shù)。
• 調用頁面路由帶的參數(shù)可以在目標頁面的 onLoad、onShow 中獲取，具體獲取方法見下方代碼示例。

代碼示例

• JS

 
 
 

  
  
  
// 目標頁面
  
  
  
Page({
  
  
  
 // 在 onLoad 中獲取
  
  
  
 onLoad: function (options) {
  
  
  
 console.log(options);
  
  
  
 },
  
  
  
 // 在 onShow 中獲取
  
  
  
 onShow: function() {
  
  
  
 // 獲取當前小程序的頁面棧
  
  
  
 let pages = getCurrentPages();
  
  
  
 // 數(shù)組中索引最大的頁面--當前頁面
  
  
  
 let currentPage = pages[pages.length - 1];
  
  
  
 // 打印出當前頁面中的 options
  
  
  
 console.log(currentPage.options);
  
  
  
 }
  
  
  
});
 
 
 

文章標題：創(chuàng)新互聯(lián)百度小程序教程：路由方式
URL標題：http://www.5511xx.com/article/dpcjdso.html