uniapp 引入的页面传值

UniApp 页面间传递参数的方法
在 UniApp 开发过程中，页面间的参数传递是一个常见的需求。这不仅限于简单的字符串或数值类型的参数，还可以是较为复杂的数据结构如对象。
使用 URL 参数传递简单数据
最基础的方式就是利用URL中的查询参数来进行页面间的数据传输。这种方式适合用于少量且不敏感的信息交换。当目标页面加载时，可通过$route.query获取这些参数[^1]。
// 跳转并附带参数
uni.navigateTo({
url: '/pages/targetPage?name=John&age=30'
});

// 在 targetPage.vue 的 onLoad 方法里读取参数
export default {
onLoad(options) {
console.log(`姓名：${options.name}, 年龄:${options.age}`);
}
}
登录后复制
利用全局变量存储临时数据
对于一些不需要长期保存但在多个页面间共享的数据，可以考虑创建一个全局的对象作为容器，在需要的时候存入取出相应的值。不过这种方法需要注意清理不再使用的属性以免造成内存泄漏[^2]。
Vue.prototype.$globalData = {}; // 定义全局变量

// 设置全局变量
this.$globalData.userInfo = { name: 'Alice', age: 28 };

// 获取全局变量
console.log(this.$globalData.userInfo);
登录后复制
发布/订阅模式进行跨页通信
针对更复杂的场景，比如从子组件向父级或其他兄弟页面发送消息的情况，则推荐采用发布-订阅机制。通过 uni.emit() 和 uni.on() 可以轻松实现这一点。此方法特别适用于处理异步操作后的回调通知，例如支付完成后的状态同步。
// 子组件内触发事件
uni.emit('updateMasq', {msg: '页面刷新'});

// 父页面监听该事件
uni.on('updateMasq', function (data) {
console.log('接收到的消息:', data.msg);
});
登录后复制
以上三种方式涵盖了大部分情况下UniApp应用内的页面交互需求。开发者可以根据实际情况灵活选用最适合的技术方案来满足项目的特定要求。