跨页面传递数据是在移动应用开发中非常常见和重要的功能。UniApp作为一个跨平台框架，提供了多种方式来实现数据的传递。下面将介绍几种常见的跨页面传递数据的方式，并给出相应的示例代码。
URL参数传递：
在源页面（例如pages/index/index.vue）中使用uni.navigateTo方法跳转到目标页面（例如pages/detail/detail.vue），并携带参数：
// pages/index/index.vue uni.navigateTo({ url: '/pages/detail/detail?name=John&age=25' });
在目标页面（pages/detail/detail.vue）中通过this.$route.query获取传递过来的参数：
// pages/detail/detail.vue console.log(this.$route.query.name); // 输出：John console.log(this.$route.query.age); // 输出：25
vuex状态
在Vuex的store中定义一个状态变量，并在源页面中修改该变量的值。然后在目标页面中通过this.$store.state访问该变量。
// store/index.js const store = new Vuex.Store({ state: { name: '' }, mutations: { setName(state, payload) { state.name = payload; } } }); // pages/index/index.vue this.$store.commit('setName', 'John'); // 修改name的值为'John' // pages/detail/detail.vue console.log(this.$store.state.name); // 输出：John
uni-app插件uni-simple-router
使用uni-simple-router插件可以更方便地实现数据传递。首先，在目标页面的路由配置中设置props属性，定义需要传递的参数。然后在源页面中跳转到目标页面时，将参数作为props的值传递。
// router.js import Router from 'uni-simple-router'; const router = new Router({ routes: [ { path: '/pages/detail/detail', name: 'detail', component: () => import('@/pages/detail/detail.vue'), props: true // 设置props为true，启用props传参 } ] }); // pages/index/index.vue uni.navigateTo({ url: '/pages/detail/detail?name=John&age=25' }); // pages/detail/detail.vue export default { props: ['name', 'age'], // 定义接收的参数 mounted() { console.log(this.name); // 输出：John console.log(this.age); // 输出：25 } };
Storage API
使用Storage API进行数据的持久化存储和跨页面传递。
// pages/index/index.vue uni.setStorageSync('name', 'John'); // 存储数据 // pages/detail/detail.vue console.log(uni.getStorageSync('name')); // 输出：John
通过上述例子，我们可以看到UniApp提供了多种灵活方便的方式来实现数据的跨页面传递。开发者可以根据具体的业务需求选择合适的方式来进行数据传递，以提高应用的灵活性和用户体验
