小程序開發之路由navigateTo、reLaunch、redirectTo、switchTab及傳值問題

頁面路由

在小程序中所有頁面的路由全部由框架進行管理。

注：路由（routing）是指分組從源到目的地時，決定端到端路徑的網絡範圍的進程。

頁面棧

框架以棧的形式維護了當前的所有頁面。 當發生路由切換的時候，頁面棧的表現如下：

注：堆是先進先出,棧是先進後出

getCurrentPages()

getCurrentPages() 函數用於獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素爲首頁，最後一個元素爲當前頁面。

注意：

• 不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。
• 不要在 App.onLaunch 的時候調用 getCurrentPages()，此時 page 還沒有生成。

路由方式

對於路由的觸發方式以及頁面生命週期函數如下：

wx.navigateTo(Object object) – 打開新頁面

保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面
參數
)

例如
完整形式

wx.navigateTo({
      url: '/pages/index/index',
      success:function(){
        //接口調用成功的回調函數
      },
      fail:function(){
        //接口調用失敗的回調函數
      },
      complete:function(){
        //接口調用結束的回調函數（調用成功、失敗都會執行）
      }
    })

使用中我們通常簡寫爲

wx.navigateTo({
      url: '/pages/index/index',
  })

navigateTo傳值問題

傳單個值

Page({
  data: {
    value:1
  },
  //跳轉
  skipClick() {
    wx.navigateTo({
      url: '/pages/index1/index1?value=' + this.data.value
    })
  },
})

接收端index1.js

onLoad: function (options) {
    console.log(options.value)
 },

傳多個值

Page({
  data: {
    value1: 1,
    value2: 2,
    value3: 3
  },
  //跳轉
  skipClick() {
    var array = new Array()
    array = [this.data.value1, this.data.value2, this.data.value3]
    wx.navigateTo({
      url: '/pages/index1/index1?array=' + JSON.stringify(array),
    })
  },
})

接收端index1.js

onLoad: function (options) {
    var array = new Array()
    array = JSON.parse(options.array);
    console.log(array[0])
    console.log(array[1])
    console.log(array[2])
  },

注：多值傳值時一定要傳加上JSON.parse()
傳值端JSON.stringify(array),
接收端JSON.parse(options.array);
否則傳過的將字符串的形式接收，無法正常解析

wx.switchTab(Object object) – 跳轉到 tabBar 頁面

跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
參數

例如

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

傳值同navigateTo一樣

wx.reLaunch(Object object)

關閉所有頁面，打開到應用內的某個頁面，可以跳轉到tabbar的頁面
參數

例如：

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

傳值同navigateTo一樣

wx.redirectTo(Object object)

關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面。
參數

例如：

wx.redirectTo({
      url: '/pages/index/index'
    })

傳值同navigateTo一樣

wx.navigateBack(Object object) – 返回上一頁面或多級頁面

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

參數

例如
注：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而redirectTo 方法則不會。所以只要navigateTo的跳轉纔可以使用wx.navigateBack方法

wx.navigateBack({
  delta: 1
})

參數：delta爲返回的層數，如果爲1，則返回上一層,如果返回層數大於進棧的層數，則按照最大層數算

注：

• navigateTo, redirectTo 只能打開非 tabBar 頁面。
• switchTab 只能打開 tabBar 頁面。
• reLaunch 可以打開任意頁面。
• 頁面底部的 tabBar 由頁面決定，即只要是定義爲 tabBar 的頁面，底部都有 tabBar。
• 調用頁面路由帶的參數可以在目標頁面的onLoad中獲取。