1.wx.navigateTo(OBJECT)

? ?需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 ‘path?key=value&key2=value2’。

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

? ?這種跳轉方式默認有返回按鈕，返回到上一個頁面。

2.wx.redirectTo(OBJECT)

? ?需要跳轉的應用內非 tabBar 的頁面的路徑，路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 ‘path?key=value&key2=value2’。

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

? ?這種跳轉方式默認有返回按鈕，返回到上一個頁面的再上一層。

3.wx.reLaunch(OBJECT)

? ?需要跳轉的應用內頁面路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 ‘path?key=value&key2=value2’，如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數。

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

? ? 這種跳轉方式默認沒有返回按鈕，不需要默認返回按鈕的頁面就可以使用這個api了。

4.wx.switchTab(OBJECT)

? ?需要跳轉的 tabBar 頁面的路徑（需在 app.json 的 tabBar 字段定義的頁面），路徑后不能帶參數。

{"tabBar": {"list": [{"pagePath": "index","text": "首頁"},{"pagePath": "other","text": "其他"}]} } wx.switchTab({url: '/index' })

? ? 我們需要調轉到tabbar定義的頁面的時候，就需要這個api了。踩過這個坑的人就知道，除了這個api，其他的都不能跳轉到tabar定義過的頁面

5.wx.navigateBack(OBJECT)

? ?delta Number 1 返回的頁面數，如果 delta 大于現有頁面數，則返回到首頁。

// 此處是A頁面 wx.navigateTo({url: 'B?id=1' }) // 此處是B頁面 wx.navigateTo({url: 'C?id=1' }) // 在C頁面內 navigateBack，將返回A頁面 wx.navigateBack({delta: 2 })

6.navigator 組件使用跳轉

/** wxss **/ /** 修改默認的navigator點擊態 **/ .navigator-hover {color:blue; } /** 自定義其他點擊態樣式類 **/ .other-navigator-hover {color:red; } <!-- sample.wxml --> <view class="btn-area"><navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator><navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁打開</navigator><navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator><navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打開綁定的小程序</navigator> </view> <!-- navigator.wxml --> <view style="text-align:center"> {{title}} </view> <view> 點擊左上角返回回到之前頁面 </view> <!-- redirect.wxml --> <view style="text-align:center"> {{title}} </view> <view> 點擊左上角返回回到上級頁面 </view>

總結

以上是生活随笔為你收集整理的微信小程序页面跳转的6种方式和区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。