uni-app页面传参总丢值的3种解决方法
更新时间：2025年12月19日 08:26:27 作者：渔_
文章介绍了三种在前端页面间传递参数的方法：URL传参、全局变量传参和本地存储传参,每种方法都有其适用场景和注意事项,需要的朋友可以参考下
明明传了对象，接收端却是 undefined；刷新页面参数直接消失…试了这 3 种方法，再也没出过问题！
方法 1：URL 传参（简单值首选）
适合传字符串、数字这类简单数据，直接拼在跳转路径后面
// 跳转页传参
uni.navigateTo({
url: `/pages/detail/detail?id=1&name=测试`
});
// 接收页取值（onLoad 生命周期里）
onLoad(options) {
console.log(options.id); // 1
console.log(options.name); // 测试
}
注意：传对象会自动转字符串，复杂数据别用这个！
方法 2：全局变量传参（复杂数据首选）
在 App.vue 里定义全局变量，适合传对象、数组
// App.vue 定义
export default {
globalData: {
userInfo: {}
}
}
// 跳转页存数据
getApp().globalData.userInfo = { id: 1, name: "测试" };
uni.navigateTo({ url: `/pages/detail/detail` });
// 接收页取数据
onLoad() {
const user = getApp().globalData.userInfo;
console.log(user); // 完整对象
}
方法 3：本地存储传参（跨页面持久化）
需要数据持久化（比如重启 APP 还在）就用这个，存到本地缓存里
// 跳转页存数据
uni.setStorageSync("orderData", { id: 1, price: 99 });
uni.switchTab({ url: `/pages/order/order` });
// 接收页取数据
onShow() {
const order = uni.getStorageSync("orderData");
console.log(order);
// 用完可以删掉，避免占用缓存
uni.removeStorageSync("orderData");
}
避坑提醒：
- URL 传参别传复杂对象，会被截断！
- 全局变量页面卸载不会消失，记得及时清空！
- 本地存储存多了占空间，用完就删！
到此这篇关于uni-app页面传参总丢值的3种解决方法的文章就介绍到这了,更多相关uni-app页面传参总丢值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
网上关于生成文章标题树的示例很多，这篇文章介绍的是利用原生JS实现自动生成文章标题树，实现过程很简单，有需要的可以参考借鉴。2016-08-08
这篇文章主要介绍了微信小程序获取用户openid的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了a标签中href=""的几种用法 ,需要的朋友可以参考下2017-08-08
这篇文章主要为大家介绍了实现jquery手风琴效果的详细代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家介绍了GoJs中使用HTML方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
JavaScript数值转换一般有三种方式，Number(param)函数、parseInt(param)、parseIFloat(param),下面为大家详细介绍，需要的朋友可以参考下2014-07-07
css文件可以用js 动态修改，在做一些交互动作时，非常实用，下面是具体示例，大家可以看看2014-08-08
对于javascript的开发人员来说，多浏览器的支持性，一直是个问题，每次都要经过测试，多个浏览器，才能使用下面一些常见的一些注意事项。2009-01-01
这篇文章主要介绍了JavaScript数据结构之广义表的定义与表示方法,简单讲述了广义表的原理与相关概念,并结合实例形式分析了javascript定义与使用广义表的相关操作技巧,需要的朋友可以参考下2017-04-04
这篇文章介绍了，js中的Replace()的一些高级的使用方法，有需要的朋友可以参考一下2013-06-06
最新评论