微信小程序 页面跳转 的四种方法

第一种：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)
  },