API 跳轉

1、wx.navigateTo

（1）基本介紹

1. 功能：保留當前頁面，跳轉到應用內的某個頁面，使用該方法跳轉后可以通過返回按鈕返回到原頁面

2. 使用場景：適用于需要保留當前頁面狀態，后續還需返回的情況，例如，從商品列表頁跳轉到商品詳情頁

• 注：跳轉的頁面必須是在 app.json 的 pages 中配置的，否則會跳轉失敗

• 注：小程序中頁面棧最多 10 層

（2）演示

wx.navigateTo({url: '/pages/detail/detail?id=123',success: function(res) {console.log('跳轉成功');},fail: function(err) {console.log('跳轉失敗', err);},complete: function() {console.log('跳轉操作完成');}
});

2、wx.redirectTo

（1）基本介紹

1. 功能：關閉當前頁面，跳轉到應用內的某個頁面，使用該方法跳轉后無法通過返回按鈕返回到原頁面

2. 使用場景：適用于不需要保留當前頁面狀態，且不希望用戶返回的情況，例如，用戶登錄成功后從登錄頁跳轉到主頁

• 注：跳轉的頁面必須是在 app.json 的 pages 中配置的，否則會跳轉失敗

（2）演示

wx.redirectTo({url: '/pages/index/index',success: function(res) {console.log('跳轉成功');},fail: function(err) {console.log('跳轉失敗', err);},complete: function() {console.log('跳轉操作完成');}
});

3、wx.switchTab

（1）基本介紹

1. 功能：跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面

2. 使用場景：用于在不同的 tabBar 頁面之間切換，例如，在小程序底部的導航欄切換不同的功能模塊

• 注：跳轉的頁面必須是在 app.json 的 pages 與 tabBar 中配置的，否則會跳轉失敗

（2）演示

wx.switchTab({url: '/pages/home/home',success: function(res) {console.log('跳轉成功');},fail: function(err) {console.log('跳轉失敗', err);},complete: function() {console.log('跳轉操作完成');}
});

4、wx.reLaunch

（1）基本介紹

1. 功能：關閉所有頁面，打開應用內的某個頁面

2. 使用場景：適用于需要清空所有頁面棧，重新打開一個頁面的情況，比如用戶退出登錄后跳轉到登錄頁

• 注：跳轉的頁面必須是在 app.json 的 pages 中配置的，否則會跳轉失敗

（2）演示

wx.reLaunch({url: '/pages/login/login',success: function(res) {console.log('跳轉成功');},fail: function(err) {console.log('跳轉失敗', err);},complete: function() {console.log('跳轉操作完成');}
});

---

navigator 組件跳轉

1、基本介紹

1. 在 WXML 文件中實現頁面跳轉，可通過設置不同屬性實現類似上述方法的跳轉效果

2. open-type 屬性用于指定跳轉方式，若不指定則默認為 navigate

open-type 屬性	說明
navigate（默認）	等效 wx.navigateTo
redirect	等效 wx.navigateTo
switchTab	等效 wx.switchTab
reLaunch	等效 wx.reLaunch

• 注：跳轉的頁面必須是在 app.json 的 pages 或 tabBar 中配置的，否則會跳轉失敗

2、演示

1. navigate

<navigator url="/pages/detail/detail?id=123"><view>點擊跳轉到詳情頁</view>
</navigator>

2. redirectTo

<navigator url="/pages/index/index" open-type="redirect"><view>點擊關閉當前頁并跳轉</view>
</navigator>

3. switchTab

<navigator url="/pages/home/home" open-type="switchTab"><view>點擊切換到 tabBar 頁面</view>
</navigator>