uniapp跨页面传递数据的几种方式

跨页面传递数据是在移动应用开发中非常常见和重要的功能。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提供了多种灵活方便的方式来实现数据的跨页面传递。开发者可以根据具体的业务需求选择合适的方式来进行数据传递，以提高应用的灵活性和用户体验