微信小程序路由跳转wx.navigateTo传参

一、业务场景

如图，商品列表页（index.js）的数据和商品详情页（dish.js）的数据都是由请求数据接口动态获取的，点击商品列表的一项时，跳转到该商品的商品详情页面去

• 问题：在获取商品详情页（dish.js）的数据时，请求接口需要一个id的参数；点击一个商品项后，页面跳转到商品详情页（dish.js），在获取当前点击的商品列表页（index.js）的商品的id后，如何将id传到dish.js文件去呢

商品列表

商品详情

二、如何实现路由跳转wx.navigateTo的传参

页面跳转的api为wx.navigateTo（）；那wx.navigateTo()如何传参呢，在商品详情页又如何接收传过来的参数呢

1. wx.navigateTo（）页面传参

（1）index.wxml绑定点击事件和id参数

• bindtap="openDishHandle" 绑定点击事件
• data-shopId="{{menuItem.id}}" 绑定当前商品的shopid

（2） index.js传参

• e事件对象去获取shopid参数
• wx.navigateTo（） 传参在url地址后面跟上id的参数即可

  // index.js
  openDishHandle: function (e) {
    console.log("e>>>", e);
    const id = e.currentTarget.dataset.shopid;
    console.log("id>>>", id);
    // 路由跳转 打开新页面
    wx.navigateTo({
      url: '../dish/dish?id=' + id,
    })
  }

（3）dish.js接收参数

• 在页面加载生命周期函数中，options对象中会接收从上一个页面跳转传进来的参数

• options打印结果

  
  
  options对象

/**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // console.log("options>>", options);
        const _this = this;
        const id = options.id;
        ShopApi.RequestShopFindApi( id, data => {
            console.log("data>>>", data);
            let product = data.resultInfo;
            _this.setData({
                product
            })
        })
    },