uni-app如何实现页面跳转并传参-uni-app-PHP中文网

uni.navigateTo跳转传参需区分URL query和extraData：onLoad仅接收query参数，extraData须在onShow中通过getCurrentPages()获取；URL传参必须encodeURIComponent编码，接收端需decodeURIComponent+JSON.parse解包；参数不可靠，复杂场景应改用事件通信或本地缓存。

uni.navigateto 是最常用也最稳妥的页面跳转传参方式，但参数能不能拿到、拿得对不对，取决于你用的是 url query 还是 extradata，以及目标页在哪个生命周期里读取。

onLoad 拿不到参数？先确认 options 来源和生命周期

很多人写完跳转，onLoad 里打印 options 是空对象，其实是因为：

onLoad 只接收 URL 中的 query 参数（即 ?key=value 那部分），不包含 extraData
如果页面被缓存（比如 keep-alive 或 tab 切换后重进），onLoad 根本不触发，只会走 onShow
H5 端刷新页面，URL 参数直接丢失，除非你手动维护 history.state

所以别默认 onLoad 就能兜住所有参数。真要保险，onShow 里补查一次 getCurrentPages() 当前栈顶页面的 options。

URL 传参必须 encode 中文和特殊字符

直接拼字符串如 url: '/pages/detail?id=1&name=张三' 在 App 和小程序可能暂时能跑，但 H5 端大概率乱码或截断。正确做法是：

所有非 ASCII 字符必须用 encodeURIComponent() 包一层
对象/数组要先 JSON.stringify()，再 encodeURIComponent()
接收端必须用 decodeURIComponent() + JSON.parse() 双重解包

示例跳转：

const userInfo = { name: '张三', role: 'admin' }
uni.navigateTo({
  url: `/pages/user/user?data=${encodeURIComponent(JSON.stringify(userInfo))}`
})

接收端：

onLoad(options) {
  if (options.data) {
    try {
      this.userData = JSON.parse(decodeURIComponent(options.data))
    } catch (e) {
      console.error('解析失败', e)
    }
  }
}

想传对象又不想拼 URL？用 extraData

extraData 是 uni.navigateTo 的隐藏参数，它不走 URL，不会被编码污染，也不受长度限制（App/小程序端），但有硬约束：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

目标页 onLoad 拿不到，只能在 onShow 或 onReady 通过 getCurrentPages() 取上一页实例来读
只在当前页面栈有效，关掉页面就丢了，不能跨进程或持久化
小程序平台对 extraData 类型校验更严，建议只传 plain object，别传 function 或 Date

示例：

// 跳转页
uni.navigateTo({
  url: '/pages/detail/detail',
  extraData: { id: 123, from: 'list' }
})
<p>// 接收页
onShow() {
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
if (prevPage && prevPage.options?.extraData) {
console.log('extraData:', prevPage.options.extraData)
}
}
</p>