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

前言

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

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

总结对比

方法	适用场景	适用数据类型	是否持久化	数据是否暴露
URL 传参	传递简单数据（ID、状态值）	字符串、数字	否	是
eventChannel	navigateTo 方式传递复杂数据	对象、数组	否	否
Vuex	多个页面共享数据	对象、数组	是	否
localStorage	短期数据存储、页面刷新保持	对象、数组	是	否

推荐方案

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

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

1. URL 参数

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

实现步骤

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

index.vue

js 复制代码

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

form.vue

js 复制代码

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

优缺点

✅ 适合小型数据传输，如 ID、状态值等

❌ 无法传输复杂对象（如 JSON），会导致数据丢失

2. eventChannel 通信

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

实现步骤

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

index.vue

js 复制代码

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

form.vue

js 复制代码

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

优缺点

✅ 适合传输复杂数据，如 JSON 对象

✅ 数据不会暴露在 URL，安全性较高

❌ 仅适用于 uni.navigateTo 方式，不适用于 redirectTo 或 switchTab

3. Vuex共享

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

实现步骤

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

store/index.js

js 复制代码

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

index.vue

js 复制代码

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

form.vue

js 复制代码

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

优缺点

✅ 适用于全局状态管理，多页面数据共享

✅ 数据不会丢失，即使用户返回上一页

❌ 适用于大规模项目，小项目可能不必要

4. localStorage 或 sessionStorage

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

实现步骤

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

index.vue

js 复制代码

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

form.vue

js 复制代码

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

优缺点

✅ 适用于短期存储，页面刷新后数据仍可用

✅ 可用于 redirectTo、switchTab，不受 eventChannel 限制

❌ 需要手动清理，否则可能导致存储过多无用数据

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

目录

前言

1. URL 参数

2. eventChannel 通信

3. Vuex共享

4. localStorage 或 sessionStorage

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