Uniapp跨页面传参

在Uniapp开发中，跨页面传参是一个非常常见且重要的操作，它能实现页面间的数据交互，极大提升应用的功能完整性与用户体验。

我们来了解一下通过路由参数进行传参。在Uniapp里，我们可以在跳转页面时，直接将参数附加在目标页面的路径后面。例如，我们有一个列表页，点击列表项要跳转到详情页并传递该项的ID。在列表页的点击事件中，使用uni.navigateTo方法，代码如下：

uni.navigateTo({
    url: '/pages/detail/detail?id=' + item.id
});

在详情页的onLoad生命周期函数里，就可以获取这个参数：

onLoad: function(options) {
    const id = options.id;
    // 接着可以根据id去获取详细数据
}

这种方式简单直接，适合传递少量且简单的数据。

除了路由参数传参，还可以使用事件总线（Event Bus）来实现跨页面传参。我们先创建一个全局的事件总线对象，在项目根目录下新建一个js文件，例如eventBus.js：

import Vue from 'vue';
export const eventBus = new Vue();

在需要发送参数的页面引入并使用：

import { eventBus } from '@/utils/eventBus.js';
eventBus.$emit('sendData', { message: '这是要传递的数据' });

在接收参数的页面监听事件：

import { eventBus } from '@/utils/eventBus.js';
export default {
    created() {
        eventBus.$on('sendData', (data) => {
            console.log(data.message);
        });
    }
}

这种方法适合在多个页面之间传递数据，而且不受父子组件关系的限制。

另外，对于复杂数据结构或者需要在多个页面共享的数据，可以考虑使用Vuex。Vuex是一个专为Vue.js应用程序开发的状态管理模式。在Uniapp项目中集成Vuex后，各个页面都可以方便地获取和修改共享数据。通过mutations、actions等方法来对数据进行操作，保证数据的一致性和可维护性。

Uniapp提供了多种跨页面传参的方式，开发者可以根据项目的实际需求，选择最合适的方法来实现页面间的数据交互，打造功能强大、交互流畅的应用程序。