微信小程式擁有web網頁和Application共同的特徵，我們的頁面都不是孤立存在的，而是通過和其他頁面進行互動，來共同完成系統的功能。今天我們來研究小程式頁面之間的跳轉方式。

1.先導

在Android中，我們Activity和Fragment都有棧的概念在裡面，微信小程式頁面也有棧的概念在裡面。微信小程式頁面跳轉有四種方式：
1.wx.navigateTo(OBJECT)；
2.wx.redirectTo(OBJECT)；
3.wx.switchTab(OBJECT)；
4.wx.navigateBack(OBJECT)
5.使用實現對應的跳轉功能；

分析：

1. 其中navigateTo是將原來的頁面儲存在頁面棧中，在跳入到下一個頁面的時候目標頁面也進棧，只有在這個情況下點選手機的返回按鈕才可以跳轉到上一個頁面；
2. redirectTo和switchTab都是先清除棧中原來的頁面，然後目標頁面進棧，使用這兩種跳轉方式，都不能通過系統的返回鍵回到上一個頁面，而是直接退出小程式；
3. redirectTo使用的時候一定要配合tabBar或是頁面裡面可以再次跳轉按鈕，否則無法回到上一個頁面；
4. switchTab跳轉的頁面必須是tabBar中宣告的頁面；
5. tabBar中定義的欄位不能超過5個頁面，小程式的頁面棧層次也不能超過5層。
6. navigateBack只能返回到頁面棧中的指定頁面，一般和navigateTo配合使用。
7. wx.navigateTo 和 wx.redirectTo 不允許跳轉到 tabbar 頁面，只能用 wx.switchTab 跳轉到 tabbar 頁面

2.頁面跳轉的具體操作

(1)wx.navigateTo(OBJECT)

保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。

OBJECT 引數說明：

示例程式碼：

wx.navigateTo({
  url: 'test?id=1'//實際路徑要寫全
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)  
  }
})

注意：為了不讓使用者在使用小程式時造成困擾，我們規定頁面路徑只能是五層，請儘量避免多層級的互動方式。

（2）wx.redirectTo(OBJECT)

關閉當前頁面，跳轉到應用內的某個頁面。
OBJECT 引數說明：

示例程式碼：

wx.redirectTo({
  url: 'test?id=1'
})

（3）wx.switchTab(OBJECT)

跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面

OBJECT 引數說明：

示例程式碼：

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首頁"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}

wx.switchTab({
  url: '/index'
})

（4）wx.navigateBack(OBJECT)

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧，決定需要返回幾層。

OBJECT 引數說明：

示例程式碼：

// 注意：呼叫 navigateTo 跳轉時，呼叫該方法的頁面會被加入堆疊，而 redirectTo 方法則不會。見下方示例程式碼

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

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

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

（5）使用<navigator/>標籤實現頁面跳轉

navigator

頁面連結。

示例程式碼：

<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
  <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁開啟</navigator>
  <navigator url="index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>

3.頁面的路由和生命週期

（1）頁面的路由

在小程式中所有頁面的路由全部由框架進行管理，對於路由的觸發方式以及頁面生命週期函式如下：

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

4.引數傳遞

（1）通過路徑傳遞引數

通過路徑傳遞引數在wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)和<navigator/>中使用方法相同
示例程式碼：以wx.navigateTo為代表

```
wx.navigateTo({
  url: 'test?id=1'//實際路徑要寫全
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.id)  
  }
})

引數與路徑之間使用?分隔，引數鍵與引數值用=相連，不同引數用&分隔；

test?id=1 中id為引數鍵，1 為引數值
在目的頁面中onLoad（）方法中option物件即為引數物件，可以通過引數鍵來取出引數值