最近在做微信小程序，碰到頁(yè)面跳轉(zhuǎn)的問(wèn)題，總結(jié)一下頁(yè)面之間跳轉(zhuǎn)的方式

一、wx.navigateTo(OBJECT)

   這是最普遍的一種跳轉(zhuǎn)方式，其官方解釋為：“保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面”

類似于html中的 window.location.href=" "
eg：

wx.navigateTo({  url: 'test?id=1'})
實(shí)際效果如下：

小程序中左上角有一個(gè)返回箭頭，可返回上一個(gè)頁(yè)面

也可以通過(guò)方法  wx.navigateBack 返回原頁(yè)面

二、wx.redirectTo(OBJECT)

關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。
類似于html中的  window.open('你所要跳轉(zhuǎn)的頁(yè)面');

eg：

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

效果如下：

左上角沒(méi)有返回箭頭，不能返回上一個(gè)頁(yè)面

三、wx.switchTab(OBJECT)

 跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面
eg：

{  "tabBar": {    "list": [{      "pagePath": "index",      "text": "首頁(yè)"
    },{      "pagePath": "other",      "text": "其他"
    }]
  }
}

wx.switchTab({  url: '/index'})

wx.navigateTo 和 wx.redirectTo 不允許跳轉(zhuǎn)到 tabbar 頁(yè)面，只能用 wx.switchTab 跳轉(zhuǎn)到 tabbar 頁(yè)面

四、wx.reLaunch(OBJECT)

關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。

跟wx.redirectTo 一樣左上角不會(huì)出現(xiàn)返回箭頭，但兩者卻不完全相同

這里要提到小程序中的  getCurrentPages() 方法

在wx.navigateTo中，每跳轉(zhuǎn)一個(gè)新的頁(yè)面，其原始頁(yè)面就會(huì)被加入堆棧，通過(guò)調(diào)用wx.navigateBack(OBJECT)可通過(guò)獲取堆棧中保存的頁(yè)面 返回上一級(jí)或多級(jí)頁(yè)面；

wx.redirectTo,方法則不會(huì)被加入堆棧,但仍可通過(guò)wx.navigateBack(OBJECT)方法返回之前堆棧中的頁(yè)面 

wx.reLaunch 方法則會(huì)清空當(dāng)前的堆棧。

eg：

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

// 此處是B頁(yè)面

wx.redirectTo({
 url: 'C?id=1'
 })
 // 在C頁(yè)面內(nèi) navigateBack，則會(huì)返回a頁(yè)面 
wx.navigateBack({
 delta: 1
 })

// 此處是B頁(yè)面

wx.reLaunch({

 url: 'C?id=1'
 })
 // 在C頁(yè)面內(nèi) navigateBack，則無(wú)效