uniapp vue 页面传参问题encodeURIComponent

页面传参objet json序列化后可能会报错

Uncaught SyntaxError: missing ) after argument list

但不一定是数据有问题,而是json成字符串后,字符串中有特殊字符,所以导致parse的时候格式不对。所以解决方案如下

如果传递参数为对象的时候,需要转换成字符串,然后接收的时候,再转换成对象。

如果只是一个字符串的话,就不需要转换了

向子页面传递参数:

javascript 复制代码
uni.navigateTo({
    url: '/pages/index/index?myData=' + encodeURIComponent(JSON.stringify(row))
})

子页面接收数据:

javascript 复制代码
onLoad(option) {
    const myData = JSON.parse(decodeURIComponent(option.myData))
    console.log(myData)
}

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。

其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

所以

1、项目中如果我们传的参数出现#,/,&这些字符,这些特殊字符会导致我们接收参数的错误
2、必须要用 encodeURIComponent 编码,目标页面进行 decodeURIComponent 解码
相关推荐
涔溪1 分钟前
深入了解 Vite 的核心特性 —— 开发服务器(Dev Server)和热更新(HMR)的底层工作机制
前端·vite
前端一课23 分钟前
【vue高频面试题】第 14 题:Vue3 中虚拟 DOM 是什么?为什么要用?如何提升性能?
前端·面试
前端一课23 分钟前
【vue高频面试题】第 17 题:Vue3 虚拟 DOM 与 PatchFlag 原理 + 静态节点提升
前端·面试
前端一课25 分钟前
【vue高频面试题】第 13 题:Vue 的 `nextTick` 原理是什么?为什么需要它?
前端·面试
前端一课25 分钟前
【vue高频面试题】第 12 题:Vue(尤其 Vue3)中父子组件通信方式有哪些?区别是什么?
前端·面试
前端一课28 分钟前
解释watch和computed的原理
前端·面试
前端一课29 分钟前
【vue高频面试题】第 18 题:Vue3 响应式原理中的 effect、依赖收集与依赖触发
前端·面试
前端一课30 分钟前
【vue高频面试题】第 19 题:Vue3 性能优化技巧
前端·面试
前端一课32 分钟前
【vue高频面试题】第 15 题:computed vs watch 区别 + 使用场景
前端·面试
前端一课32 分钟前
【vue高频面试题】第 20 题:Vue3 生命周期 + watch 执行顺序
前端·面试