Error in onLoad hook: “URIError: URI malformed“ found in…报错处理以及完善uniapp针对对象传参

使用uniapp传参的过程中遇到这么一个问题,当我们需要传整个对象作为参数时,我会先将这个对象先编码,然后再解码,从而获取到怎么参数,平常实操的时候也没有遇到过问题,但是今天测试的时候,刚好一个数据碰巧,就报错了,报错内容就是:

复制代码
//跳转前页面的方法
toDeviceDetail(deviceInfo) {
    //传参对象,使用encodeURIComponent编码
    let query = encodeURIComponent(JSON.stringify(deviceInfo))
	uni.navigateTo({
		url:'/pages/....../deviceDetail?deviceQuery='+ query
	})
},
 
 
// 跳转后页面获取的参数的方法
onLoad(options) {
    let obg ={}
    // 获取传递的对象参数,使用decodeURIComponent解码,并转为对象
    obj = JSON.parse(decodeURIComponent(options.deviceQuery));
}

bug原因是,如果编码的对象中的参数有"%",那么就会对编码跟解码造成问题,从而报错

解决方案:正常解码,编码时对所有"%"进行单独处理,手动转换为"%25",代码如下:

复制代码
toDeviceDetail(deviceInfo) {
    //传参对象,使用encodeURIComponent编码
    let str = JSON.stringify(deviceInfo)
    //注意这里------------------------------------------------------------------
    str = str.replace(/%/g, '%25')
    //这里---------------------------------------------------------------------------------
    let query = encodeURIComponent(str)
	uni.navigateTo({
		url:'/pages/....../deviceDetail?deviceQuery='+ query
	})
},

最终实现在uni-app中跳转页面并传递对象参数的需求 解决这个问题的关键就是需要手动转换为"%25"

相关推荐
Mintopia1 分钟前
在混沌宇宙中捕捉错误的光——Next.js 全栈 Sentry / LogRocket
前端·javascript·next.js
Mintopia3 分钟前
长文本 AIGC:Web 端大篇幅内容生成的技术优化策略
前端·javascript·aigc
VueVirtuoso3 分钟前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
少年阿闯~~10 分钟前
transition(过渡)和animation(动画)——CSS
前端·css·动画·过渡
Async Cipher12 分钟前
CSS 继承 (Inheritance)
前端·css
祈祷苍天赐我java之术19 分钟前
Vue 整体框架全面解析
前端·javascript·vue.js
洛小豆1 小时前
Git 打标签完全指南:从本地创建到远端推送
前端·git·github
世间小小鱼1 小时前
【爬坑指南】亚马逊文件中心 AWS S3 预签名URL 前端直传
前端·云计算·aws
华仔啊1 小时前
前端登录token到底应该存在哪?LocalStorage、SessionStorage还是Cookie?一篇说透!
前端·javascript
BeefyBytes1 小时前
动态组件库建设
前端