原創+轉發：微信小程序navigator、redirectTo、switchTab幾種頁面跳轉方式

什么是事件？

事件是視圖層到邏輯層的通訊方式。 事件可以將用戶的行為反饋到邏輯層進行處理。

詳解（以常見的tap點擊事情為例）

模板.wxml代碼：

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

JS文件代碼：

1.先導
在Android中，我們Activity和Fragment都有棧的概念在里面，微信小程序頁面也有棧的概念在里面。微信小程序頁面跳轉有四種方式： 
1.wx.navigateTo(OBJECT)； 
2.wx.redirectTo(OBJECT)； 
3.wx.switchTab(OBJECT)； 
4.wx.navigateBack(OBJECT) 

分析：
其中navigateTo是將原來的頁面保存在頁面棧中，在跳入到下一個頁面的時候目標頁面也進棧，只有在這個情況下點擊手機的返回按鈕才可以跳轉到上一個頁面；
redirectTo和switchTab都是先清除棧中原來的頁面，然后目標頁面進棧，使用這兩種跳轉方式，都不能通過系統的返回鍵回到上一個頁面，而是直接退出小程序；
redirectTo使用的時候一定要配合tabBar或是頁面里面可以再次跳轉按鈕，否則無法回到上一個頁面；
switchTab跳轉的頁面必須是tabBar中聲明的頁面；
tabBar中定義的字段不能超過5個頁面，小程序的頁面棧層次也不能超過5層。
navigateBack只能返回到頁面棧中的指定頁面，一般和navigateTo配合使用。
wx.navigateTo 和 wx.redirectTo 不允許跳轉到 tabbar 頁面，只能用 wx.switchTab 跳轉到 tabbar 頁面

2.頁面跳轉的具體操作
(1)wx.navigateTo(OBJECT)，從二級菜單跳三級菜單，正向 保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。
（2）wx.redirectTo(OBJECT)
關閉當前頁面，跳轉到應用內的某個頁面。 
（3）wx.switchTab(OBJECT)
跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
（4）wx.navigateBack(OBJECT)，從三級菜單跳二級菜單，反向 關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧，決定需要返回幾層。

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

（5）使用<navigator/>標簽實現頁面跳轉
<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>

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對象即為參數對象，可以通過參數鍵來取出參數值

2、以上代碼總結，通俗點：

navigateTo === navigator，手機點擊返回都能回到上一頁；

wx.navigateBack(OBJECT)，從三級菜單跳二級菜單，反向

 

redirectTo，手機點擊返回，回不到上一頁

switchTab，能且只能跳轉到tabbar頁面