微信小程式跳轉方式

老街一角發表於2020-12-23

小程式頁面跳轉的幾種常用方式

一:js實現
1.navigateTo (跳轉其他頁面後有返回鍵,不可以跳轉到tabBar頁面)

//例如從當前頁面跳轉到詳情頁面
wx.navigateTo({
  url: '/pages/detail/detail?id=1'
})

2.switchTab(沒有返回鍵,是在tabBar頁面中跳轉,不可以攜帶引數)

wx.switchTab({  
      url: `/pages/detail/detail`,
    })

3.relaunch(可以跳轉到任意頁面,沒有返回按鈕,但是有一個首頁按鈕)

wx.reLaunch({
      url: '/pages/detail/detail'
    })

4.redirectTo(只可以跳轉到tabBar頁面,沒有返回按鈕,但有首頁按鈕)

wx.redirectTo({
       url: `/pages/detail/detail`,
    })

5.navigateBack(應用在跳轉後的頁面,dalte值為1,表示跳轉到上一頁,2,表示跳兩級)

 wx.navigateBack({
       delta:1
    })

區別:
1.wx.navigator是開啟一個新頁面,那個頁面是隱藏了,原頁面是onHide,所以是可以返回的,但是返回之後,跳轉的頁面就unload了

2.wx.redirecTo是當前頁面替換成新的頁面,所以返回不去onunload(頁面被解除安裝)

3.tabBar無論跳哪個頁面都是onHide

二:通過navigator標籤在元件中實現

open-type:跳轉路由的型別,例:open-type="redirect"

1.<navigator url = "/pages/details/details">跳轉到新頁面</navigator>

2.<navigator url = "/pages/details/details" open-type = "redirect">跳轉到新頁面</navigator>

3.<navigator url = "/pages/details/details" open-type = "switchTab">跳轉到新頁面</navigator>

相關文章