返回上一页并传递参数，uni-app这么做就对了

2024-01-24 07:47:31

在 Uni-app 中返回上一页并传递参数

在 Uni-app 开发中，返回上一页并传递参数是一个常见的需求。本文将介绍两种实现此功能的方法，并提供详细的代码示例。

方法一：使用 `getCurrentPages()` 函数获取上一页面栈实例

步骤：

在 A 页面定义一个用于接收参数的方法：

export default {
  methods: {
    receiveParam(param) {
      console.log(param)
    }
  }
}

在 B 页面调用 A 页面的方法并传递参数：

uni.navigateBack({
  delta: 1, // 返回上一页
  success: function() {
    var pages = getCurrentPages() // 获取当前页面栈
    var prevPage = pages[pages.length - 2] // 获取上一个页面实例
    prevPage.$vm.receiveParam('参数值') // 调用上一个页面方法并传递参数
  }
})

方法二：使用 `getCurrentPages()` 函数获取上一页面栈实例，在 A 页面的 `onShow()` 中传递参数

步骤：

在 A 页面定义一个 onShow 方法用于接收参数：

export default {
  onShow() {
    var pages = getCurrentPages() // 获取当前页面栈
    var prevPage = pages[pages.length - 2] // 获取上一个页面实例
    if (prevPage && prevPage.route === 'pages/B') {
      this.param = prevPage.param // 接收上一个页面传递的参数
    }
  },
  data() {
    return {
      param: null // 用于接收参数
    }
  }
}

在 B 页面调用 A 页面的方法并传递参数：

uni.navigateBack({
  delta: 1, // 返回上一页
  success: function() {
    var pages = getCurrentPages() // 获取当前页面栈
    var prevPage = pages[pages.length - 2] // 获取上一个页面实例
    prevPage.param = '参数值' // 将参数赋值给上一个页面的 data
  }
})