微信小程序——頁面路由

官方文檔：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

API：
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

頁面棧

普通的網頁在頁面跳轉時，頁面會被刷新；而對於單頁面應用，不同頁面間的跳轉不刷新頁面。

小程序的跳轉，是不同的機制，採用的是頁面棧。

隊列可以理解爲兩頭開放的管道；棧則是一頭開放一頭封死的管道。所以隊列是先進先出，而棧是先進後出。

所以在小程序裏，不是簡單的跳轉，不要一直打開新頁面，而是使用給定的API管理好頁面棧。

頁面棧的表現

方式	觸發時機	頁面棧表現
初始化	小程序打開的第一個頁面	新頁面入棧
打開新頁面	調用APIwx.navigateTo或使用組件<navigator open-type="navigateTo"/>	同上
頁面重定向	調用APIwx.redirectTo或使用組件<navigator open-type="redirectTo"/>	當前頁面出棧，新頁面入棧
頁面返回	調用APIwx.navigateBack或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕	頁面不斷出棧，直到目標返回頁
Tab 切換	調用APIwx.switchTab或使用組件<navigator open-type="switchTab"/>或用戶切換Tab	頁面全部出棧，只留下新的 Tab 頁面
重加載	調用APIwx.reLaunch或使用組件<navigator open-type="reLaunch"/>	頁面全部出棧，只留下新的頁面

注意事項:

• 使用頁面返回到沒頁面，該頁面只會觸發onShow，而不會進入onLoad
• navigateTo和redirectTo只能打開非tabBar頁面；switchTab只能打開tabBar頁面
• reLaunch可以打開任意頁面

頁面間傳參

調用頁面路由帶的參數可以在目標頁面的onLoad中獲取。可傳多個參數。

參數與路徑之間使用 ? 分隔，參數鍵與參數值用 = 相連，不同參數用 & 分隔。如下：

wx.navigateTo({
    url: '/pages/test/test?id=1&name=a'
});

//test.js
Page({
  onLoad: function(option){
    console.log(option) //{id: "1", name: "a"}
  }
})

頁面返回

可通過getCurrentPages()獲取當前的頁面棧，決定需要返回幾層。

使用參數delta，定義返回的頁面數，如果delta大於現有頁面數，則返回到首頁。

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 此處是A頁面
wx.navigateTo({
    url: 'B?id=1'
})

// 此處是B頁面
wx.navigateTo({
    url: 'C?id=1'
})

// 在C頁面內 navigateBack，將返回A頁面
wx.navigateBack({
    delta: 2
})