uniapp开发微信小程序，路由跳转传参多种方式，页面通讯、窗体通讯

方式一：

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});


// 在test.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

方式二：这种方式可以忽略页面顺序，场景a页面跳转b页面，那么可以通过这种方式a页面给b页面传值，也可以b页面给a页面传值。 这种仅限于跳转页面是起始页面和目标页面之间传值，假设两个页面之间还存在其他页面的跳转，那么就只能使用下文的窗体通讯

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: 'pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

url有长度限制，太长的字符串会传递失败，可改用窗体通信、全局变量，另外参数中出现空格等特殊字符时需要对参数进行编码，如下为使用encodeURIComponent对参数进行编码的示例。

            let URLcoursePay = encodeURIComponent(JSON.stringify(e))
            let url = `/pagesA/course/course?item=${URLcoursePay}`
            uni.navigateTo({
                url
            })

           
// 在test.vue页面接受参数
onLoad: function (option) {
 let optionItem = decodeURIComponent(option.item)
            let Obj=JSON.parse(optionItem)
            console.log(Obj);
}

窗体通讯：

uni.$emit(eventName,OBJECT)

触发全局的自定义事件。附加参数都会传给监听器回调。

    uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

    uni.$on('update',function(data){
        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
    })

uni.$off([eventName, callback])

移除全局自定义事件监听器.

Tips

• 如果没有提供参数，则移除所有的事件监听器；

• 如果只提供了事件，则移除该事件所有的监听器；

• 如果同时提供了事件与回调，则只移除这个回调的监听器；

• 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

注意事项

• uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等

• 使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听

Tips

• 如果页面没有打开，将不能 注册监听事件 uni.$on 和 uni.$once 。

• 一次性的事件，直接使用 uni.$once 监听，不需要移除。

特别需要注意的是如果页面没有打开 那么相当于uni.$on就没有被注册到监听事件

一般业务场景是 页面1跳转页面2 ；1给2传递信息 ，那么emit写在1，这个时候2写的$on,当页面1触发emit并跳转页面2时候，1页面emit触发时 2页面的事件并没有监听，所以会通讯失败，只有是当2页面传递给1页面信息时候，那么进入1页面会先监听事件，再在2页面emit传值，才符合逻辑。

但是像一级页面跳转二级页面传值，可以通过上面讲的方式二中可以实现