微信小程序頁面跳轉的5種方式及區別

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定義過的頁面

4.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
})

5.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>