第二篇:UniApp页面跳转+数据传参,3种常用场景手把手教学

uniApp页面跳转+数据传参大全，3种高频场景，代码直接复制用！

做uniApp开发，页面跳转和数据传参是最基础、最常用的功能，但很多新手总会遇到传参失败、页面跳转报错、参数丢失等问题，尤其是不同场景下的跳转方法，很容易混淆。

今天整理了UniApp3种高频页面跳转+数据传参场景，附完整可复制代码，新手直接套用，再也不用踩坑，看完就能上手开发！

在uniApp中，常用的页面跳转API有uni.navigateTo、uni.redirectTo、uni.switchTab，分别对应不同业务场景，下面结合代码逐一讲解。

一、保留当前页面跳转（uni.navigateTo）

适用场景：从列表页跳转到详情页，需要返回原页面

传参方式：路径后拼接参数，目标页面通过onLoad接收

注意：该方法跳转后，原页面不会关闭，可返回，最多跳转10层页面。

二、关闭当前页面跳转（uni.redirectTo）

适用场景：登录成功后跳转到首页，关闭登录页，无法返回

传参方式：同navigateTo，路径拼接参数

注意：适合不需要返回的页面，避免用户重复操作。

三、跳转tabBar页面（uni.switchTab）

适用场景：跳转到底部导航tab页面，该方法无法传参

传参解决方案：通过vuex、本地存储（uni.setStorageSync）实现参数传递。

四、传参避坑小贴士

1. 参数包含中文时，需要用encodeURIComponent编码，接收时decodeURIComponent解码

2. 传递复杂对象/数组时，建议转为JSON字符串，再解析

3. 跳转路径必须是pages.json中注册的页面，否则报错

这3种是UniApp开发中最常用的跳转传参场景，代码直接复制到项目中就能用，新手再也不用纠结API选择。