微信小程序路由传参

路由传参常用方式有以下几种

1. 通过url传参

   // 产品列表页面
    详情
   
   // 或者
   wx.navigateTo({
     url: '/pages/detail/detail?productId=12345'
   })
   

   // 产品详情页面
   Page({
     onLoad: function(option){
       let productId = option.productId;
       console.log(productId);
     }
   })
   

   上面的方式的参数不能是对象,如果需要传对象,可以将对象转成json字符串,然后拼接到url后面,在接收页面再将json字符串转成对象

   let info = {
    a:2,
    b:3
   }
   let infoStr = JSON.stringfy(info);
   wx.navigateTo({
     url: '/pages/detail/detail?infoStr='+infoStr
   })
   

   // 产品详情页面
   Page({
     onLoad: function(option){
       let infoStr = option.infoStr;
       let info = JSON.parse(infoStr);
     }
   })
   

2. 通过事件传参

   1. 官网例子

   // 产品列表页
   wx.navigateTo({
     url: url: '/pages/detail/detail'
     events: {
       // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
       acceptDataFromOpenedPage: function(data) {
         console.log(data)
       },
       someEvent: function(data) {
         console.log(data)
       }
       ...
     },
     success: function(res) {
       // 通过eventChannel向被打开页面传送数据
       res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
     }
   })
   

   // 产品详情页
   Page({
     onLoad: function(option){
       const eventChannel = this.getOpenerEventChannel()
       eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
       eventChannel.emit('someEvent', {data: 'test'});
       // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
       eventChannel.on('acceptDataFromOpenerPage', function(data) {
         console.log(data)
       })
     }
   })
   

2. 简化例子
   以上例子,在跳转的时候列表页可以向详情页传数据,详情页也可以向列表页传数据,平时我们经常都只是传数据,很少需要回传,以下是简化的例子

// 列表页
wx.navigateTo({
  url: "/pages/home/detail/detail",
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    let data = {productId: 'sadf2323',productName:'金龙鱼花生油'};
    res.eventChannel.emit("info", data);
  }
});

// 详情页
onLoad: function(options) {
  const eventChannel = this.getOpenerEventChannel();
  // 监听info事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on("info", function(data) {
     console.log(data);
  });
},

总结: 路由传参可以用这两种方式

1. 通过url拼接参数传输,需要传对象,需要传对象就先讲对象转成json字符串再传
2. 通过eventChannel(事件通道)进行传输(可以传对象)