Vue3中从一个页面(index)传输数值到另一个页面(form)的方法详解
作者：码农研究僧
前言
在 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页面传输数值的资料请关注脚本之家其它相关文章！