Uniapp路由传递数据
在开发uniapp应用时，我们常常需要在不同的页面之间传递数据。而uniapp提供了多种方式来实现路由传递数据的功能，包括参数传递、事件总线、vuex状态管理等。在本篇文章中，我们将重点介绍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事件总线
http://t.csdn.cn/gctOl
在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是一种专门用于管理状态的工具，它可以将数据集中管理并在不同页面之间共享。
在uniapp中，我们可以使用vuex来实现路由传递数据的功能。首先，我们需要在store中定义数据状态和相关操作：
// store/index.js
const state = {
data: null
}
const mutations = {
setData(state, data) {
state.data = data
}
}
const actions = {
setData({ commit }, data) {
commit('setData', data)
}
}
export default new Vuex.Store({
state,
mutations,
actions
})
然后，在发送数据的页面中，我们可以使用vuex中的actions方法来设置state中的数据：
// A页面
this.$store.dispatch('setData', data)
在接收数据的页面中，我们可以通过vuex中的state来获取数据：
// B页面
computed: {
data() {
return this.$store.state.data
}
}
需要注意的是，使用vuex需要先安装vuex依赖包，并在main.js中引入和注册vuex：
// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import store from './store/index'
Vue.use(Vuex)
const app = new Vue({
store,
// ...
})
app.$mount()
4.总结
在uniapp中，路由传递数据有多种方式可供选择，不同的方式适用于不同的场景。参数传递适用于简单数据的传递，事件总线适用于多个组件之间的数据传递，而vuex则适用于大规模数据的集中管理和共享。开发者可以根据自己的实际情况来选择最适合的方式。