uniapp页面跳转携带参数 两个页面互相传参

1. 直接在 url 后面拼接传递参数（单页面传参）

url： 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，在下一个页面的onLoad函数中可得到传递的参数

A页面代码：

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

test页面代码：

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

2.事件监听传参，监听被打开页面发送到当前页面的数据（页面之间相互传参）

A页面代码：

// 跳转到test.vue页面传递参数，并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: 'pages/test',
  events: {
    // 为指定事件添加一个监听器，获取test.vue页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    // 事件名称可以自定义
    someEvent: function(data) {
      console.log(data)
    }
  },
  success: function(res) {
    // 通过eventChannel向test.vue页面传送数据（参数）
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: '爱敲代码的婷婷婷' })
  }
})

test页面代码：

// 在test.vue页面，向 A页面 通过事件传递数据（参数）相互传参
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();

  eventChannel.emit('acceptDataFromOpenedPage', {data: 'test页面的参数传递给A页面，在A页面的acceptDataFromOpenedPage事件内拿到'});

  eventChannel.emit('someEvent', {data: '同上，我是test页面传过来的，在A页面中someEvent事件内拿到'});

  // 监听acceptDataFromOpenerPage事件，获取A页面通过eventChannel传送到当前页面的数据（参数）
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })

}

以上便是uniapp页面相互传参的方式，现在博主将传参应用到实际项目里面，通过点击事件进行页面互相传参，如下：

注意：我这里做逻辑判断是因为 在我的项目中有多个不同的页面都需要跳转到右边页面，主要是为了区分当前参数是不是左边页面传过来的（你要根据你的业务逻辑来决定是否需要进行判断）

 这里还有一个误区，就是this的指向需要注意，由于我的语法用的是vue2，所以会牵扯到this引发的问题。如上图所示，我想在当前页面的uni.navigateTo的事件里面拿到右边页面传过来的参数给我当前页面里的data数据赋值，我刚开始直接使用了this，发现一直没赋值上去，后来发现是this指向不对，因为我这里用的不是箭头函数，所以它的this并没有指向外层，而是指向了函数本身，所以我们需要提前把this保存了，然后再进行赋值

左边页面的代码：

//这是我的点击事件
toAddress(){
        //这里一定要保存好this，否则页面数据无法修改
        const that =this
        uni.navigateTo({
          url: '/pages/address/address?selectAddress=true',
          events: {
            // 为指定事件添加一个监听器，获取右边页面传送到当前页面的数据
            selectAddress: function(data) {
              console.log(data)
              // 拿到右边页面传递过来的值并赋值
              that.addressInfo =data
            },
          },

        })
      },

右边页面的代码：

  
onLoad(option) {
    // option拿到左边页面传递过来的参数
    console.log(option)
    // 这里是我的逻辑判断
    this.selectAddress= (option.selectAddress==='true')
  },
methods: {
    /**
     * 选择地址
     * @param item 地址信息
     */
    selectItem(item) {
      if (this.selectAddress) {
        // 向左边页面传递参数
        this.getOpenerEventChannel().emit('selectAddress', item);
        //并返回到左边页面
        uni.navigateBack({});
      }
    },
}