Vue3中从一个页面(index)传输数值到另一个页面(form)的方法详解

更新时间：2025年02月26日 09:04:56 作者：码农研究僧

在 Vue 3 开发中,经常需要在不同组件或页面之间传递数据,例如从 index 页面获取某个数值（如 cntr、tradeId）后,将其传输到 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

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

form.vue

优缺点

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

2. eventChannel 通信

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

实现步骤

index 页面通过 success 回调，使用 eventChannel.emit 传输数据
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共享

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

实现步骤

在 Vuex 的 store 中定义 state 并提供 mutation
index 页面调用 commit 方法存入数据
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

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

实现步骤

index 页面存入 localStorage
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 限制

缺点：

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

以上就是Vue3中从一个页面(index)传输数值到另一个页面(form)的方法详解的详细内容，更多关于Vue3页面传输数值的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue Router 中 Hash和 History 模式的核心区别、使用场景
文章详细介绍了VueRouter中Hash模式和History模式的核心区别、底层原理、使用场景及部署注意事项,文章还提供了实战部署的解决方案和选型建议,感兴趣的朋友跟随小编一起看看吧
2026-01-01
vue3实现无缝滚动列表效果(大屏数据轮播场景)
vue3-scroll-seamless 是一个用于 Vue 3 的插件,用于实现无缝滚动的组件,它可以让内容在水平或垂直方向上无缝滚动,适用于展示轮播图、新闻滚动、图片展示等场景,本文就给大家介绍了vue3实现无缝滚动列表效果,需要的朋友可以参考下
2024-07-07
Vue PC前端扫码登录功能实现
最近在做APP客户端扫描PC端二维码登录,于是记录一下实现过程,下面这篇文章主要给大家介绍了关于Vue PC前端扫码登录功能实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
VUE3中实现拖拽与缩放自定义看板vue-grid-layout详解
想实现桌面自由拖拽布局的效果,找到了vue-grid-layout栅格布局插件,可以完美解决,下面这篇文章主要给大家介绍了关于VUE3中实现拖拽与缩放自定义看板vue-grid-layout的相关资料,需要的朋友可以参考下
2023-02-02
使用Vue-cli3.0创建的项目如何发布npm包
这篇文章主要介绍了使用Vue-cli3.0创建的项目，如何发布npm包,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-10-10
Vue.Draggable拖拽功能的配置使用方法
这篇文章主要为大家详细介绍了Vue.Draggable拖拽功能配置使用的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
Vue中的methods、computed计算属性和watch监听属性的使用和区别解析
这篇文章主要介绍了Vue中的methods、computed计算属性和watch监听属性的使用和区别,本文通过示例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-01-01
vue混入mixin流程与优缺点详解
混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
2022-09-09
详解Vue router路由
这篇文章主要为大家介绍了Vue 的router路由，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
vue3数据监听watch/watchEffect的示例代码
我们都知道监听器的作用是在每次响应式状态发生变化时触发，在组合式 API 中，我们可以使用 watch()函数和watchEffect()函数,下面我们来看下vue3如何进行数据监听watch/watchEffect，感兴趣的朋友一起看看吧
2023-02-02