前端在跳转传递参数过长或者含某些特殊字符时跳转失败或者传递参数被截断解决方法

BUG_Jia

已于 2022-06-21 16:31:15 修改

阅读量5.1k

点赞数 2

文章标签：前端 javascript json css3 前端框架

于 2022-04-02 17:46:58 首次发布

本文链接：https://blog.csdn.net/BUG_Jia/article/details/123925494

版权

该博客讨论了在页面跳转时如何处理长参数传递的问题。通过使用encodeURIComponent进行编码，以及decodeURIComponent进行解码，可以解决参数过长导致的错误。同时，文中提到了在接收参数时需要对特殊字符如%、？、#、&等进行替换，以避免解析错误。此方法确保了参数的安全传递并成功解析JSON对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、页面跳转传递参数过长

如果需要传递的参数content过长，传递的时候会有问题
所以使用encodeURIComponent来传递，使用decodeURIComponent来接收

toInfo(item) {
				console.log(item)
				let str=encodeURIComponent(JSON.stringify(item))
				let str1=str.replace(/%/g, '%25')
                //因为百分号在接收时会报错，所以转换成16进制%25，
                //如果用下面哪种方法接收处理这一步可以不写
				console.log(encodeURIComponent(JSON.stringify(item)))
				this.$u.route({
					url: 'pages/xiangqing',
					params: {
						info: str1,
					}
				})
			},

在接收参数的时候如果传递的参数中有%，？，#，&，-，传递时会报错
所以要将危险的值替换掉

onLoad(option) {
         option.info =  this.encodeSearchKey(option.info)
  this.info = JSON.parse(decodeURIComponent(option.info));
}，
methods: {
 encodeSearchKey(key) {
    const encodeArr = [{
      code: '%',
      encode: '%25'
    }, {
      code: '?',
      encode: '%3F'
    }, {
      code: '#',
      encode: '%23'
    }, {
      code: '&',
      encode: '%26'
    }, {
      code: '=',
      encode: '%3D'
    }];
    return key.replace(/[%?#&=]/g, ($, index, str) => {
      for (const k of encodeArr) {
        if (k.code === $) {
          return k.encode;
        }
      }
    });
  },
}

接收的时候先decodeURIComponent解码再解析JSON字符串