微信小程序 頁面跳轉 的四種方法

第一種：wx.navigateTo

保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程序中頁面棧最多十層。

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

聲明式：

/**
   * 不帶參數
   */
<navigator url="/pages/home/home" hover-class="none">點擊跳轉</navigator>

/**
   * 帶參數
   */
<navigator url="/pages/home/home?title=1&time=1234" hover-class="none">點擊跳轉</navigator>

編程式：

//不帶參數
wx.navigateTo({
        url: "/pages/home/home"
      })

//帶參數
wx.navigateTo({
      url: '/pages/home/home?name=' + this.data.name + '&age=' + this.data.age
    })

 

第二種：wx.redirectTo

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

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.redirectTo.html

編程式：

//不帶參數
wx.redirectTo({
  url: '/pages/home/home'
})

//帶參數
wx.redirectTo({
  url: '/pages/home/home?id=1&name='+this.data.name
})

 

第三種：wx.navigateBack

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

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

編程式：

//返回上一頁
wx.navigateBack({
  delta: 1
})

 

第四種：wx.reLaunch

關閉所有頁面，打開到應用內的某個頁面

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.reLaunch.html

編程式：

//不帶參數
wx.reLaunch({
   url: '/pages/home/home'
 })

//帶參數
wx.reLaunch({
  url: '/pages/home/home?id=1&name='+this.data.name
})

 

跳轉的頁面，統一在 onLoad 的 options 中獲取參數

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