[uniapp的页面传参]详细讲解uniapp中页面传参的传递方式和接受方式 使用案例 代码注释

在uniapp中，页面传参是非常常见的需求。本文将详细讲解uniapp中页面传参的传递方式和接受方式，以及使用案例，同时附上代码注释。

一、传递方式

1. URL传参

URL传参是一种比较简单的传递方式，它是通过URL地址来传递参数的。我们可以在URL地址后面加上参数，例如：

<uni-button @click="goToDetail">跳转到详情页</uni-button>//编程式传参  比较常用
<navigator url="/pages/detail/detail?id=123">跳转到详情页</navigator>//标签传参
// 跳转到详情页，并传递id参数
goToDetail() {
   
  uni.navigateTo({
   
    url: '/pages/detail/detail?id=123'
  })
}

在接收页面中，我们可以通过this.$route.query来获取传递的参数：

export default {
   
  onLoad() {
   
    console.log(this.$route.query.id) // 输出：123
  }
}

对于微信小程序 this.$ route.query.id 可能不能使用 因为微信小程序不识别 this.$ route
而替代方案
不使用this.$ route 使用 onload传参

onLoad(getData) {
   //getData就是参数对象  兼用微信小程序
	console.log(getData.id);		
}

2. Storage传参

Storage传参是通过uni-app提供的Storage API来传递参数的。我们可以在跳转之前将参数存储到Storage中，然后在接收页面中获取：

<uni-button @click="goToDetail">跳转到详情页</uni-button>

// 跳转到详情页，并将id参数存储到Storage中
goToDetail() {
   
  uni.setStorageSync('id', 123)
  uni.navigateTo({
   
    url: '/pages/detail/detail'
  })
}

在接收页面中，我们可以通过uni.getStorageSync来获取存储的参数：

export default {
   
  onLoad() {
   
    console.log(uni.getStorageSync('id')) <