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

ROCKY_8172024-06-05 16:25

1.声明式导航传参

navigator组件的url属性用来指定将要跳转到的页面的路径，同时，路径的后面还可以携带参数：

（1）参数与路径之间使用 ? 分割

（2）参数键与参数值用 = 相连

（3）不同参数用 & 分隔

XML 复制代码

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

点击"跳转到info页面"就会跳转到info页面

2.编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数

XML 复制代码

<!--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>

XML 复制代码

gotoInfo2() {
    wx.navigateTo({
      url: '/pages/info/info?name=ls&gender=男',
    })
  }

点击按钮"跳转到info页面"就会跳转到info页面

3.在onLoad当中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到

XML 复制代码

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    this.setData({
      query: options
    })
  }