url怎么传递对象

问题背景

项目的跳转链接中有时会传递object对象，但是我们直接去传递时会报错，所以需要经过处理再传递。

解决办法：

第一种：使用encodeURI和 decodeURI解决（适合同一个vue项目页面跳转）
第二种：使用encodeURIComponent和decodeURIComponent解决（通用型强，可适合跨端项目跳转）

第一种：使用encodeURI和 decodeURI解决（适合同一个项目跳转）

api说明： 它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , #"，也不进行编码。编码后，它输出符号的utf-8形式，并且在每个字节前加上%。
需要注意的是，它不对单引号’编码。

let objDemo = {
      name: "zdd",
      age: 12,
      content: "abc"
    };
    let jsonObj = JSON.stringify(objDemo);
    jsonObj = encodeURI(jsonObj);
    let url = "http://localhost:8080/demo?id=" + jsonObj;
    console.log(url);
    jsonObj = decodeURI(jsonObj);
    jsonObj = JSON.parse(jsonObj);
    console.log(jsonObj)

JSON.stringify(objDemo)将对象转换为 JSON 字符串。
encodeURI() 函数可把字符串作为 URI 进行编码。
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

第二种：使用encodeURIComponent和decodeURIComponent解决

api说明： 它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。
因此，“; / ? : @ & = + $ , #”，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码

let objDemo = {
      name: "zdd",
      age: 12,
      content: "abc"
    };
    let jsonObj = JSON.stringify(objDemo);
    jsonObj = encodeURIComponent(jsonObj);
    let url = "http://localhost:8080/demo?id=" + jsonObj;
    console.log(url);
    jsonObj = decodeURIComponent(jsonObj);
    jsonObj = JSON.parse(jsonObj);
    console.log(jsonObj)

JSON.stringify(objDemo)将对象转换为 JSON 字符串。
encodeURIComponent() 函数可把字符串作为 URI 进行编码。
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码过的 URI 进行解码。
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

为什么说第二种方法更适合跨端跳转？

原因是在跨端跳转时，“; / ? : @ & = + $ , #”，这些在encodeURI()中不被编码的符号，会被默认进行加码转换，导致你到网页上使用decodeURI()解码时，会解析出错。所以不如一开始就把对象中所有的字符都进行编码，再到网页中进行解码，这样就不会出错了