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


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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2024 CODEPRJ.COM