在 Uniapp 开发中，实现子组件页面跳转并携带参数是一个常见需求，它能有效提升应用的交互性与数据传递效率。

要明确 Uniapp 提供了多种页面跳转方式，如 uni.navigateTo、uni.redirectTo、uni.switchTab 等，不同方式适用于不同场景。以 uni.navigateTo 为例，它可以保留当前页面，跳转到应用内的某个页面，方便用户返回上一级页面。

在子组件中实现页面跳转并携带参数，需先在子组件中定义相关方法。例如，在模板中添加一个按钮，并绑定点击事件：<button @click="goToNextPage">跳转到下一页</button>。在 script 部分，定义方法 goToNextPage：

methods: {
    goToNextPage() {
        const param = {
            key: 'value',
            num: 123
        };
        uni.navigateTo({
            url: '/pages/nextPage/nextPage?data=' + JSON.stringify(param)
        });
    }
}

这里将参数对象 param 进行 JSON 序列化后作为查询参数拼接到目标页面的路径中。

在目标页面接收参数也很关键。在目标页面的 onLoad 生命周期函数中获取参数：

onLoad: function (options) {
    const receivedParam = JSON.parse(options.data);
    console.log(receivedParam.key);
    console.log(receivedParam.num);
}

通过解析 options 中的数据，就能获取到从子组件传递过来的参数。

若使用 uni.redirectTo 方法，它会关闭当前页面，跳转到应用内的某个页面，适用于不需要返回上一级页面的场景。使用方式与 uni.navigateTo 类似，只是语法略有不同：

uni.redirectTo({
    url: '/pages/nextPage/nextPage?data=' + JSON.stringify(param)
});

而 uni.switchTab 用于跳转到 tabBar 页面，在传递参数时同样需要将参数拼接到路径中。但需注意，tabBar 页面切换会触发页面的 onLoad 等生命周期函数，接收参数的方式与普通页面一致。

掌握 Uniapp 子组件页面跳转并携带参数的技巧，能让开发者更灵活地构建应用的页面交互逻辑，为用户提供更流畅、丰富的使用体验。无论是简单的数据传递，还是复杂的业务逻辑交互，都能通过合理运用这些方法轻松实现。