uni-app页面传参总丢值的3种解决方法
作者：渔_
文章介绍了三种在前端页面间传递参数的方法：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页面传参总丢值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！