一、業(yè)務(wù)場(chǎng)景

如圖，商品列表頁(yè)（index.js）的數(shù)據(jù)和商品詳情頁(yè)（dish.js）的數(shù)據(jù)都是由請(qǐng)求數(shù)據(jù)接口動(dòng)態(tài)獲取的，點(diǎn)擊商品列表的一項(xiàng)時(shí)，跳轉(zhuǎn)到該商品的商品詳情頁(yè)面去

• 問(wèn)題：在獲取商品詳情頁(yè)（dish.js）的數(shù)據(jù)時(shí)，請(qǐng)求接口需要一個(gè)id的參數(shù)；點(diǎn)擊一個(gè)商品項(xiàng)后，頁(yè)面跳轉(zhuǎn)到商品詳情頁(yè)（dish.js），在獲取當(dāng)前點(diǎn)擊的商品列表頁(yè)（index.js）的商品的id后，如何將id傳到dish.js文件去呢

商品列表

商品詳情

二、如何實(shí)現(xiàn)路由跳轉(zhuǎn)wx.navigateTo的傳參

頁(yè)面跳轉(zhuǎn)的api為wx.navigateTo（）；那wx.navigateTo()如何傳參呢，在商品詳情頁(yè)又如何接收傳過(guò)來(lái)的參數(shù)呢

1. wx.navigateTo（）頁(yè)面?zhèn)鲄?/h4>

（1）index.wxml綁定點(diǎn)擊事件和id參數(shù)

• bindtap="openDishHandle" 綁定點(diǎn)擊事件
• data-shopId="{{menuItem.id}}" 綁定當(dāng)前商品的shopid

<view class="menuItem" wx:for="{{productList}}" wx:key="index" bindtap="openDishHandle" data-shopId="{{menuItem.id}}">

（2） index.js傳參

• e事件對(duì)象去獲取shopid參數(shù)
• wx.navigateTo（） 傳參在url地址后面跟上id的參數(shù)即可

  // index.js
  openDishHandle: function (e) {
    console.log("e>>>", e);
    const id = e.currentTarget.dataset.shopid;
    console.log("id>>>", id);
    // 路由跳轉(zhuǎn) 打開(kāi)新頁(yè)面
    wx.navigateTo({
      url: '../dish/dish?id=' + id,
    })
  }

（3）dish.js接收參數(shù)

• 在頁(yè)面加載生命周期函數(shù)中，options對(duì)象中會(huì)接收從上一個(gè)頁(yè)面跳轉(zhuǎn)傳進(jìn)來(lái)的參數(shù)

• options打印結(jié)果

  
  
  options對(duì)象

/**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
     */
    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
            })
        })
    },