Uniapp的路由传递数据和生命周期

路由传递数据:

1.参数传递

参数传递是最常见的一种路由传递数据的方式,它可以通过在路由跳转时将数据作为参数传递到目标页面中。

首先,在触发路由跳转时,我们可以使用uni.navigateTo或uni.redirectTo方法进行页面跳转,并通过传递参数来传递数据,例如:

// A页面
uni.navigateTo({
  url: '/pages/B/B?id=123&name=uniapp',
})

在B页面中,我们可以通过获取路由参数来获取传递的数据:

// B页面
onLoad(options) {
  console.log(options.id) // 123
  console.log(options.name) // uniapp
}

在实际开发中,我们还可以使用uni.getStorageSync和uni.setStorageSync方法来实现跨页面存储和获取数据。

2.事件总线

事件总线是一种通过事件来传递数据的机制,它适用于不同页面之间有多个数据需要传递的情况。

关于事件总线可以参考

在uniapp中,我们可以使用uni.$emit和uni.$on方法来分别触发和监听事件。首先,我们需要在App.vue中定义事件总线:

// App.vue
import Vue from 'vue'
Vue.prototype.$bus = new Vue()

 然后,在发送数据的页面中,我们可以使用uni.$emit方法触发一个事件:

 // A页面
this.$bus.$emit('eventName', data)

 在接收数据的页面中,我们可以使用uni.$on方法监听事件,并获取传递的数据:

// B页面
created() {
  this.$bus.$on('eventName', data => {
    console.log(data)
  })
}

需要注意的是,事件总线中发送和接收数据的组件必须是同一个Vue实例,因此需要在App.vue中定义事件总线。

3.vuex状态管理

vuex是一种专门用于管理状态的工具,它可以将数据集中管理并在不同页面之

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

永yuan的one

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值