路由传参和JSON.parse解析问题

背景:通过路由传参的方法,传一个复杂对象

obj = {

"key":"name1",

"jsonString":'{"key":"name2"}'

}

首先,转字符串str = JSON.stringify(obj); 得到"{"key":"name1","jsonString":"{\"key\":\"name2\"}"}"

假设路由是这样的(angular路由的写法):route/:node

route/str这样传给应用,str就是上面的参数。

路由跳转到应用后,应用获取参数param = this.route.snapshot.params['nodes'];明显param应该就是str,这是一个JSON字符串。

注意:直接解析时,就报错了,JSON.parse(param );

原因:jsonString属性的值,本身也是一个JSON字符串,其中的双引号是有转义符的,这个过程中会丢失转义符!

解决:这时就要用到encodeURIComponent()了,str = encodeURIComponent(JSON.stringify(obj))其实,无论是路由传参还是url传参,都要可能带一些特殊符号,这时就需要用encodeURIComponent编码。接收方decodeURIComponent()解码。

意外发现:当用encodeURIComponent编码后,应用端通过路由获取参数后,并没有解码,直接JSON.parse(param )就解析出了对象,很是意外,想了一下,怀疑是获取路由参数的时候,param = this.route.snapshot.params['nodes']这个过程自动解码了。于是查看了route包:果然内部有很多解码的操作。应该是拿到参数后首先进行了解码。

路由传参和JSON.parse解析问题