uni-app页面数据传参方式

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

1. 通过 uni.navigateTo 传参

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

示例代码

页面 A (index.vue)



页面 B (pageB/index.vue)



2. 通过路由参数传参

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

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

路由配置 (router.js)

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

页面 B (PageB.vue)



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

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

你可能感兴趣的:(uni-app)