【Vue 3 | Uniapp】 从一个页面 (index) 传输数值到另一个页面 (form) 的方法详解（附Demo）

前言

在 Vue 3 开发中，经常需要在不同组件或页面之间传递数据，例如从 index 页面获取某个数值（如 cntr、tradeId）后，将其传输到 form 页面进行填写或编辑

本文将介绍几种常见的数据传输方法，并为每种方法提供一个小的 Demo 代码示例

基本的知识推荐阅读：详细分析uni-app中的页面路由基本知识（附Demo）

总结对比

推荐方案

1. 如果只是传递少量数据（如 ID），URL 传参最简单
2. 如果需要传递复杂对象（如 JSON），推荐 eventChannel
3. 如果多个页面共享数据，Vuex 是更好的选择
4. 如果需要在页面刷新后仍保留数据，localStorage 是不错的方案

一开始博主使用的第一种，后续由于参数过多，使用第二种：

1. URL 参数

适用于简单数据传递，如字符串、数字等

实现步骤

1. 在 index 页面使用 uni.navigateTo 或 this.$router.push 传递参数
2. 在 form 页面通过 onLoad(options) 或 this.$route.query 解析参数

index.vue

methods: {
  goToForm() {
    uni.navigateTo({
      url: `/pages/form/form?cntr=manong123&tradeId=1`
    });
  }
}

form.vue

onLoad(options) {
  this.cntr = options.cntr || "";
  this.tradeId = options.tradeId || "";
}

优缺点
✅ 适合小型数据传输，如 ID、状态值等
❌ 无法传输复杂对象（如 JSON），会导致数据丢失

2. eventChannel 通信

适用于需要传输复杂数据（如对象、数组）且不希望数据暴露在 URL 参数中的情况

实现步骤

1. index 页面通过 success 回调，使用 eventChannel.emit 传输数据
2. form 页面通过 getOpenerEventChannel().on 监听并接收数据

index.vue

methods: {
  goToForm() {
    uni.navigateTo({
      url: `/pages/form/form`,
      success: (page) => {
        if (page.eventChannel) {
          page.eventChannel.emit("setItemData", {
            cntr: "manong123",
            tradeId: "1",
            driverName: "码农研究僧"
          });
        }
      }
    });
  }
}

form.vue

onLoad(options) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.on("setItemData", (itemData) => {
    this.itemData = itemData;
  });
}

优缺点
✅ 适合传输复杂数据，如 JSON 对象
✅ 数据不会暴露在 URL，安全性较高
❌ 仅适用于 uni.navigateTo 方式，不适用于 redirectTo 或 switchTab

3. Vuex共享

适用于多个页面共享数据，或者希望数据在页面间持久化的情况

实现步骤

1. 在 Vuex 的 store 中定义 state 并提供 mutation
2. index 页面调用 commit 方法存入数据
3. form 页面通过 mapState 获取数据

store/index.js

export default {
  state: {
    itemData: {}
  },
  mutations: {
    setItemData(state, data) {
      state.itemData = data;
    }
  }
};

index.vue

methods: {
  goToForm() {
    this.$store.commit("setItemData", {
      cntr: "manong123",
      tradeId: "1",
      driverName: "码农研究僧"
    });
    uni.navigateTo({ url: "/pages/form/form" });
  }
}

form.vue

computed: {
  itemData() {
    return this.$store.state.itemData;
  }
}

优缺点
✅ 适用于全局状态管理，多页面数据共享
✅ 数据不会丢失，即使用户返回上一页
❌ 适用于大规模项目，小项目可能不必要

4. localStorage 或 sessionStorage

适用于页面刷新后仍需保持数据的情况，如缓存用户输入的信息

实现步骤

1. index 页面存入 localStorage
2. form 页面从 localStorage 读取数据

index.vue

methods: {
  goToForm() {
    uni.setStorageSync("itemData", {
      cntr: "manong123",
      tradeId: "1",
      driverName: "码农研究僧"
    });
    uni.navigateTo({ url: "/pages/form/form" });
  }
}

form.vue

onLoad(options) {
  this.itemData = uni.getStorageSync("itemData") || {};
}

优缺点
✅ 适用于短期存储，页面刷新后数据仍可用
✅ 可用于 redirectTo、switchTab，不受 eventChannel 限制
❌ 需要手动清理，否则可能导致存储过多无用数据