惊雷无声 发表于 2024-6-28 15:22:07

微信小程序-页面导航-导航传参

1.声明式导航传参
navigator组件的url属性用来指定将要跳转到的页面的路径,同时,路径的后面还可以携带参数:
(1)参数与路径之间使用 ? 分割
(2)参数键与参数值用 = 相连
(3)差别参数用 & 分隔
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator> https://img-blog.csdnimg.cn/direct/7184fc247e0544788b49e2545984ea43.png
点击“跳转到info页面”就会跳转到info页面
https://img-blog.csdnimg.cn/direct/e1071281a6c34ed0a2aade87dce4fd06.png

2.编程式导航传参
调用wx.navigateTo(Object object)方法跳转页面时,也可以携带参数
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator><button bindtap="gotoInfo2">跳转到info页面</button> gotoInfo2() {
    wx.navigateTo({
      url: '/pages/info/info?name=ls&gender=男',
    })
}
https://img-blog.csdnimg.cn/direct/2e2c6c7acc45407eb4ee0b3209a1570f.png
点击按钮“跳转到info页面”就会跳转到info页面
https://img-blog.csdnimg.cn/direct/71f331705435469fadcb4db36e1c0e48.png


3.在onLoad当中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到
/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
    console.log(options)
    this.setData({
      query: options
    })
}

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 微信小程序-页面导航-导航传参