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

在 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); // 输出: 张三
}

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

推荐方案

• 简单对象：优先使用 JSON.stringify + query 参数；
• 复杂对象/大数据量：使用全局状态管理（Vuex/Pinia）；
• 跨页面持久化：使用本地存储（需注意性能）；
• 临时性传递：使用事件总线或路由钩子。

根据你的具体场景选择合适的方式，确保数据传递安全、高效且易于维护。