uniapp返回上一页带参数id

uniapp yekong

在uniapp中返回上一页并带参数id,可以通过以下两种方法实现:

方法一:使用事件通信

在跳转到新页面时,可以使用uni.navigateTo方法,并通过events对象传递一个事件监听器。在新页面中,当操作完成需要返回时,通过eventChannel.emit方法发送数据,并调用uni.navigateBack返回上一页。

主页面代码示例

// 主页面
methods: {
  goToSelectPage() {
    uni.navigateTo({
      url: '../selectPage/selectPage',
      events: {
        acceptDataFromOpenedPage: function(data) {
          console.log(data); // data为子页面传回的数据
        }
      }
    });
  }
}

子页面代码示例

// 子页面
methods: {
  sendDataBack() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit('acceptDataFromOpenedPage', { id: '123' });
    uni.navigateBack();
  }
}

方法二:使用本地存储

另一种方法是在跳转前将数据存储在本地,然后在返回上一页时从本地存储中读取数据。

设置数据示例

// 子页面设置数据
uni.setStorageSync('id', '123');
uni.navigateBack();

获取数据示例

// 主页面获取数据
onShow() {
  const id = uni.getStorageSync('id');
  console.log(id); // 获取到的id
}

这两种方法都可以实现在uniapp中返回上一页时携带参数id。第一种方法通过页面间的事件通信来传递数据,而第二种方法则是通过本地存储来实现数据的传递。

喜欢