encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。
其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。
以下例子,我们就是要通过使用encodeURIComponent()实现将url中的&
变成%26
,从而实现将url中的所有参数显示到链接中。
问题流程描述
我的vue项目在
支付中心
界面点击确认支付
按钮时,会验证是否登录;如果未登录的话,就进行授权,授权成功后,再次回到原来的支付中心
界面。但是问题发生了:授权后能回到原来的支付中心
界面,但是支付中心
的链接中的参数不见了。
问题细节描述
支付中心
界面点击确认支付
按钮时,验证是否登录;如果未登录的话,就会把B通过vue-router插件
中的this.$router.push({path: "/login",query: {redirect:window.location.href.split("#")[1]}});
传递到登录页,然后把登录页的url替换成微信授权url
从而进行微信授权
。微信授权的url如下,其中变量routeObj
存储的就是B,由于B中有多个参数,所以必定有多个&
符号,那么在成功进行授权后,就会会发现要跳转的url是不全的,即变成了http://localhost:8080/#/payCenter?currentShopId=1515
,但是想要变成B。出现这种问题,很直观的原因是:遇到&
符号就停止截取了。
微信授权url
window.location.href =
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.$WeChart.APPID}&redirect_uri=${this.$WeChart.REDIRECT_URL}?redirect=${routeObj}&response_type=code&scope=${this.$WeChart.SCOPE[1]}&connect_redirect=1#wechat_redirect`;
image.png
执行如下两个log, 区别是有无encodeURIComponent()
console.log("原始url-----", window.location.href);
console.log("处理前-----",window.location.href.split("#")[1]);
console.log("处理后-----",encodeURIComponent(window.location.href.split("#")[1]));
打印的截图如下
image.pngA:原始url
http://localhost:8080/#/payCenter?currentShopId=1515&inputPhone=18663268160&cus_type=2&storeImg=http%3A%2F%2Ffeiyangimage.oss-cn-shanghai.aliyuncs.com%2Factivity%2F1583280847452963.png&surDays=361¤tShopState=5
B:处理前的url中的#
后面的参数:
/payCenter?currentShopId=1515&inputPhone=18663268160&cus_type=2&storeImg=http%3A%2F%2Ffeiyangimage.oss-cn-shanghai.aliyuncs.com%2Factivity%2F1583280847452963.png&surDays=361¤tShopState=5)
C:处理后的url中的#
后面的参数:%2FpayCenter%3FcurrentShopId%3D1515%26inputPhone%3D18663268160%26cus_type%3D2%26storeImg%3Dhttp%253A%252F%252Ffeiyangimage.oss-cn-shanghai.aliyuncs.com%252Factivity%252F1583280847452963.png%26surDays%3D361%26currentShopState%3D5
网友评论