当前位置：首页 > news >正文

uniapp跳转页面时如何带对象参数

news 2025/7/8 8:52:15

在 uniapp 中，页面间传递对象参数有多种方式，以下是几种常见且实用的实现方法：

1. JSON.stringify + query 参数

将对象序列化为 JSON 字符串，通过 URL 参数传递，目标页面再解析回对象。

// 传递页面
const userInfo = { id: 1, name: '张三', age: 20 };
uni.navigateTo({url: `/pages/detail/detail?user=${encodeURIComponent(JSON.stringify(userInfo))}`
});// 接收页面
onLoad(options) {try {const userInfo = JSON.parse(decodeURIComponent(options.user));console.log(userInfo.name); // 输出: 张三} catch (e) {console.error('参数解析失败', e);}
}

优点：简单直接，无需额外存储；
缺点：URL 长度有限制（约 2KB），复杂对象可能截断；
注意：必须使用 encodeURIComponent 和 decodeURIComponent 处理特殊字符。

2. 全局事件总线（Event Bus）

创建全局事件中心，传递前发布事件，接收页面监听事件获取数据。

// main.js 中创建全局事件总线
Vue.prototype.$eventBus = new Vue();// 传递页面
const userInfo = { id: 1, name: '张三' };
this.$eventBus.$emit('userInfo', userInfo);
uni.navigateTo({ url: '/pages/detail/detail' });// 接收页面
onLoad() {this.$eventBus.$on('userInfo', (userInfo) => {console.log(userInfo.name); // 输出: 张三// 建议：接收后移除监听，避免重复触发this.$eventBus.$off('userInfo');});
}

优点：适合传递复杂对象，无大小限制；
缺点：数据流向不清晰，需手动管理事件监听；
注意：必须在组件销毁时移除监听（如 onUnload），防止内存泄漏。

3. 全局变量（Vuex/Pinia 或自定义存储）

将对象存入全局状态管理或自定义全局变量，接收页面直接读取。

// 使用 Vuex 示例
// 传递页面
import { mapActions } from 'vuex';
export default {methods: {...mapActions(['setUserInfo']),goDetail() {const userInfo = { id: 1, name: '张三' };this.setUserInfo(userInfo);uni.navigateTo({ url: '/pages/detail/detail' });}}
}// 接收页面
import { mapState } from 'vuex';
export default {computed: {...mapState(['userInfo'])},onLoad() {console.log(this.userInfo.name); // 输出: 张三}
}

优点：数据持久化，多页面可共享；
缺点：需引入状态管理库，可能增加项目复杂度；
注意：敏感数据建议在使用后清除，避免安全风险。

4. 本地存储（Storage）

将对象存入本地存储，接收页面读取后删除。

// 传递页面
const userInfo = { id: 1, name: '张三' };
uni.setStorageSync('userInfo', JSON.stringify(userInfo));
uni.navigateTo({ url: '/pages/detail/detail' });// 接收页面
onLoad() {try {const userInfo = JSON.parse(uni.getStorageSync('userInfo'));console.log(userInfo.name); // 输出: 张三uni.removeStorageSync('userInfo'); // 建议：读取后删除} catch (e) {console.error('读取存储失败', e);}
}

优点：数据可跨页面、跨应用生命周期访问；
缺点：读写操作是异步的（同步方法可能阻塞 UI），频繁操作影响性能；
注意：存储内容会永久保留，需手动清理，且敏感数据需加密处理。

5. 路由钩子 + 临时变量

在路由钩子中设置临时变量，目标页面通过路由实例获取。

// router.js 中添加全局前置守卫
router.beforeEach((to, from, next) => {if (from.name === 'home' && to.name === 'detail') {to.meta.userInfo = from.meta.tempData; // 假设 home 页面已设置 tempData}next();
});// 传递页面
this.$router.currentRoute.meta.tempData = { id: 1, name: '张三' };
uni.navigateTo({ name: 'detail' });// 接收页面
onLoad() {const userInfo = this.$route.meta.userInfo;console.log(userInfo.name); // 输出: 张三
}

优点：数据仅在路由跳转期间有效，无需手动清理；
缺点：需自定义路由逻辑，耦合度高；
注意：路由钩子执行时机需与页面生命周期配合，避免数据丢失。