uniapp路由跳转传递与接收参数

Uniapp 是一个基于 Vue.js 的跨平台开发框架，它允许开发者使用一套代码来同时构建 iOS、Android、H5 等多个平台的应用。在 Uniapp 中，路由传参是非常常见的需求，它可以让页面之间进行数据的传递和交互。下面是对 Uniapp 路由传参的详细解析

一、传递参数

在 Uniapp 中，可以通过两种方式来传递参数：

1.通过 URL 参数传递

通过在 URL 中添加参数的方式传递数据，可以在目标页面中通过 $route.query 获取传递过来的参数。

例如，在 A 页面中跳转到 B 页面时，可以这样写

uni.navigateTo({
  url: '/pages/B/B?param1=' + param1 + '&param2=' + param2
})

在 B 页面中，可以通过以下代码获取传递过来的参数

export default {
  onLoad(options) {
    console.log(options.param1)
    console.log(options.param2)
  }
}

 2.通过路由跳转时传递参数

在使用 uni.navigateBack 方法返回上一个页面时，可以通过 options 参数向上一个页面传递数据。

例如，在 B 页面返回 A 页面时，可以这样写

uni.navigateBack({
  delta: 1,
  success() {
    let page = getCurrentPages().pop()
    if (page == undefined || page == null) {
      return
    }
    page.setData({
      data1: data1,
      data2: data2
    })
  }
})

在 A 页面中，可以通过以下代码获取传递过来的参数

export default {
  data() {
    return {
      data1: '',
      data2: ''
    }
  },
  onLoad() {
    console.log(this.data.data1)
    console.log(this.data.data2)
  }
}

二、获取参数

1.在 onLoad 中获取参数

在 onLoad 生命周期中，可以通过 options 参数获取传递过来的参数。

例如，在 A 页面中跳转到 B 页面时，可以这样写

uni.navigateTo({
  url: '/pages/B/B?param1=' + param1 + '&param2=' + param2
})

在 B 页面中，可以通过以下代码获取传递过来的参数

export default {
  onLoad(options) {
    console.log(options.param1)
    console.log(options.param2)
  }
}

 2.在页面中通过 $route 获取参数

在页面中可以通过 $route.query 获取传递过来的参数。

例如，在 A 页面中跳转到 B 页面时，可以这样写

uni.navigateTo({
  url: '/pages/B/B?param1=' + param1 + '&param2=' + param2
})

在 B 页面中，可以通过以下代码获取传递过来的参数

export default {
  computed: {
    query() {
      return this.$route.query
    }
  },
  mounted() {
    console.log(this.query.param1)
    console.log(this.query.param2)
  }
}

三、总结

Uniapp 路由传参的方法有两种，分别是通过 URL 参数传递和通过路由跳传参，其中通过 URL 参数传递的方式适用于在页面之间进行简单的数据传递，而通过路由跳转时传递参数的方式适用于在页面之间进行复杂的数据传递。

在获取参数时，可以在 onLoad 生命周期中通过 options 参数获取传递过来的参数，也可以通过页面中的 $route.query 获取传递过来的参数。如果需要在返回上一个页面时传递数据，可以在 success 回调函数中通过 getCurrentPages 方法获取当前页面栈的情况，然后通过 setData 方法将数据传递给上一个页面。

总的来说，Uniapp 路由传参非常方便，开发者可以根据实际需求选择适合的方式进行数据的传递和交互。