uni-app页面数据传参方式

uni-app?是一个使用 Vue.js 开发所有前端应用的框架，可以编译到 iOS、Android、H5、小程序等多个平台。当你在多个页面间传递参数时，通常有多种方法，例如通过?uni.navigateTo、路由参数、本地存储等方式。下面是一些方法的说明和示例代码。

1. 通过?uni.navigateTo?传参

当你使用?uni.navigateTo?进入新页面时，你可以在新页面的?onLoad?生命周期中获取到传入的参数。

示例代码

页面 A (index.vue)

<template>
<button @click="goToPageB">跳转到页面B</button>
</template>

<script>
export default {
methods: {
goToPageB() {
const data = { name: '张三', age: 20 }; // 这里是你要传递的数据
uni.navigateTo({
url: '/pages/pageB/pageB?data=' + JSON.stringify(data) // 通过URL携带数据
});
}
}
}
</script>

页面 B (pageB/index.vue)

<template>
<div>姓名：{{ name }}，年龄：{{ age }}</div>
</template>

<script>
export default {
data() {
return {
name: '',
age: ''
};
},
onLoad: function (options) {
const data = JSON.parse(options.data); // 从URL中获取数据
this.name = data.name;
this.age = data.age;
}
}
</script>

2. 通过路由参数传参

如果你使用的是 Vue Router，你可以在路由配置中定义参数，然后在页面中通过?$route.params?获取。

示例代码?(需要先安装和配置 Vue Router)

路由配置 (router.js)

const routes = [
{ path: '/pageB/:data', component: PageB } // :data 是动态段，可以传递任何数据
];

页面 B (PageB.vue)

<template>
<div>姓名：{{ name }}，年龄：{{ age }}</div>
</template>

<script>
export default {
data() {
return {
name: '',
age: ''
};
},
created() {
const data = this.$route.params.data; // 从路由参数中获取数据，注意是字符串，需要转换回对象或按需处理。这里只是一个简单示例。
const parsedData = JSON.parse(data); // 转换回对象（假设你的数据是JSON格式）
this.name = parsedData.name; // 使用转换后的数据，根据实际情况可能需要进一步处理或映射。
this.age = parsedData.age;
}
}
</script>

3. 通过本地存储（LocalStorage、SessionStorage等）传递数据。

这是一种不太推荐的方法，因为它并不是为了跨页面通信设计的。但它可以在某些场景下作为临时存储手段。例如：在?onLoad?中获取数据，在?onUnload?中保存数据。或者在用户关闭 app 后记住他们的状态等。使用时要注意数据的生命周期和安全性。