传url链接参数 前端get方法_在url get参数中传递大量数据参数的解决方案

问题

为什么我一定要在url get参数里传递大量参数，而不使用post提交呢？

由于实际项目实现了前后端分离，前端是vue框架开发，而且也并没有做成单页应用，所以会出现两个页面需要大量传递参数的情况。

思考

传统的get参数，将数据使用a=1&b=2的格式传递。这个方法有一个缺点，如果是对象、数组的情况下参数会是这样的：a[0][id]=1&a[0][name]=aaa&a[1][id]=1&a[1][name]=aaa。如果数据格式复杂一些，那url长度会非常长。虽然现代浏览器和服务器支持的url长度还不算短，但是这样既不美观，也使得url中有过多冗余字符，不好。

接下来我灵光一现，想到了数据压缩！

解决于是我找到了lz-string，这是一个js的数据压缩解压库。

用法：

var data = {

id: 1,

name: '啊啊啊',

list: [

{name: 'a'},

{name: 'b'},

{name: 'c'},

],

};

// 数据加密

var compressResult = LZString.compressToBase64(JSON.stringify(data));

// 加密结果：N4IglgJiBcCMA0IB2BDAtgUxiQUqp5IgDZgDOALjANqiqbYogC+8N6W0IARky8m9gGMmAXUZA===

// 数据解密

var decompressResult = JSON.parse(LZString.decompressFromBase64(compressResult));

console.log(data, compressResult, decompressResult);复制代码

最后，我传参先进行数据加密，以这样的方式传参：/?data=加密结果的base64

在接收参数的页面中，从get参数中获取data后进行解密。

这样就解决了问题，而且url变得好看又安全！