前言 我们在开发项目中经常会遇到一种问题，就是在前端页面跳转时传递某些参数，通常我们是通过路由传递的，但是如果数据量很多的情况下，会造成路由非常的长，如果在大的话甚至会超出地址栏URL的最大限度，这就狗带了．最近手头上一个项目的前端刚好遇到这个问题，该项目前端用的是vue2.x．不是什么大问题，但是之前没有认真想过解决办法，于是将解决思路记录下来了． 地址栏URL最大限度 首先我查了不同浏览器地址栏URL的最大限度． 虽然HTTP协议的RFC规范并没有详细规定URL的最大字符长度限制，但实际上，在浏览器或者服务器中总会存在限制的。这里所说的字符是指ASCII字符。HTTP RFC2616协议没有规定URL的最大长度，规定服务器如果不能处理太长的URL，就得返回414状态码（Request-URI Too Long）。 微软 Internet Explorer： 微软帮助网站上说IE7之前（包括IE7）的浏览器，对URL的最大长度限制是2,083个字符。 Firefox： 对于Firefox1.5.x，地址栏能显示的URL最大长度是65,536个字符，但实际上有效的URL最大长度不少于100,000个字符。 对于Firefox 3.0.5，mozilla官方论坛上有人测试其URL长度限制为65,000个字符。 也有人说Firefox可以支持URL高达2Gbyte的长度（参考），在data URL中可以运用到这样大数据量的URL。dataURL是一种URL本身包含了实际数据的URL，比如一个图片、一个HTML网页或者全部的数据、代码等等。仅有Firefox支持dataURL。 Safari： Safari最少支持80,000个字符长度的URL。 Opera： Opera官方网站上说，Opera并没有强制限制URL的长度。 网友测试Opera 9支持最少190,000个字都长度的URL，并且Opera9的地址栏可以显示、编辑、复制和粘贴完整的URL串。 综上，又在网上找了一个附表： IE URL最大限制是2083个字节，Path长度最大是2048字节（Get请求）。 Firefox 65536 Safari 80000以上 Opera 190000字节以上 Chrome 8182字节 Apache Server 8192字节 IIS 16384字节 Perl HTTP::Daemon 至少8000字节 我的思路 思路一 我的第一个想法就是通过缓存进行解决----cookie/localStorage/sessionStorage．通过在服务器或客户端进行数据缓存以供页面进行读取．但是在后续的思考中我想到首先cookie缓存量很小，同时session/cookie对与网站所有页面是透明的，我只是想实现指定页面间进行参数传递，其他页面应该不知情，考虑到保密性，我放弃了这个想法． 思路二 我的第二个思路还是通过缓存来实现，但是是通过application cache(共享本地缓存)，具体的介绍就不在这里说了．但是我考虑到application cache具有缓存时间，而我想要的是在页面跳转后缓存的参数数据被销毁，也就是类似闪存的机制．同时application cache缓存页面需要的资源，那么其他页面所需要的资源也同时被缓存下来，这样做得不偿失． 思路三 通过js的全局变量．这个没什么介绍的，将参数保存在全局变量中，那么在页面声明周期内所有页面都可以使用．但是还是那个问题，在使用全局变量的时候，其他页面也能够获得．所以pass. 思路四 我找到利用原生很不错的方法，那就是通过模态窗口来实现页面间的参数传递．以下是对showModalDialog(模态窗口)的简单介绍： 基本介绍： 复制代码 showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog() 方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog() 方法用来创建一个显示HTML内容的非模态对话框。 复制代码 使用方法： 复制代码 vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures]) 复制代码 参数说明： 复制代码 sURL -- 必选参数，类型：字符串。用来指定对话框要显示的文档的URL。 vArguments -- 可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过 window.dialogArguments来取得传递进来的参数。 sFeatures -- 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。 复制代码 sFeatures的参数选择： 复制代码 1. dialogHeight: 对话框高度，不小于100px 2. dialogWidth: 对话框宽度。 3. dialogLeft: 离屏幕左的距离。 4. dialogTop: 离屏幕上的距离。 5. center: { yes | no | 1 | 0 } ： 是否居中，默认yes，但仍可以指定高度和宽度。 6. help: {yes | no | 1 | 0 }： 是否显示帮助按钮，默认yes。 7. resizable: {yes | no | 1 | 0 } [IE5+]： 是否可被改变大小。默认no。 8. status: {yes | no | 1 | 0 } [IE5+]： 是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 9. scroll: { yes | no | 1 | 0 | on | off }：是否显示滚动条。默认为yes。 ... 复制代码 使用showModalDialog进行参数传递： 通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，如下： 复制代码 test.html： var obj=new Object(); obj.name="qiubinchao"; obj.tel="12345678"; window.showModalDialog('./testb.html',obj,"dialogWidth:500px;dialogHeight:550px"); window.location.href="./testb.html"; 复制代码 复制代码 testb.html： var obj = window.dialogArguments console.log(window.dialogArguments); 复制代码 一个问题：在chrome37后，showModalDialog被chrome禁了，这就很尴尬了，但是有解决的办法： 复制代码 test.html： 复制代码 一些其他问题： 怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？ 在被打开的网页里加上： 就可以了。这句话一般是放在之间的。 怎样才刷新showModalDialog和showModelessDialog里的内容？ 在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码： 复制代码 reload... 复制代码 将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要配合使用，不然你按下F5会弹出新窗口的。 如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。 复制代码 复制代码 也要配合，不然会打开一个新的IE窗口，然后再关掉的。 Math.random与showModalDialog。 当你设置的弹出网页固定时（如上面的"modal.htm"页面），ie很可能到临时文件区，下载上次产生的该页面(openPage.html),而没有重新加载，对于动态加载的页面来说，这样往往产生误会，如没有及时更新数据，也就更不利于开发者测试。所以，你可以采用如下方式： 复制代码 var strPage = “/medal.htm?random="+Math.random(); 复制代码 这样每次产生的strPage是不一样的． 但是最后我还是放弃了，因为首先我用的是vue框架，写原生太不优雅；其次如上所示，使用模态窗口的局限性太大． 思路五 俗话说：解铃还须系铃人 在一筹莫展之际，我想到了vue-router中的params．上代码： 复制代码 传参: this.$router.push({name:'/send/sendHome', params: {setStr: this.multipleSelection}}); 接收参数: let setArray = this.$route.params.setStr; 复制代码 vue-router中无论是params/query(路由对象属性)都支持参数传递，但是我的毛病又犯了，这两个有什么区别呢？ query传递参数： 复制代码 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数: this.$route.query.id 复制代码 注意：无论是params还是query进行参数传递，传参是this.$router,接收参数是this.$route,一定要细心． 区别： 1．当使用query进行参数传递时，参数会跟在路径后面．我们可以在地址栏看到后面跟的参数，而params不会在地址栏显示．直白的说query相当于get请求，而params相当于post请求． 2．params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined．https://www.cnblogs.com/lishanlei/p/9769507.html