美文网首页Vue3
vue 多参数在url中传递的注意点(尽可能使用encodeUR

vue 多参数在url中传递的注意点(尽可能使用encodeUR

作者: CoderZb | 来源:发表于2020-04-22 16:55 被阅读0次

    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.png

    A:原始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&currentShopState=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&currentShopState=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


    lk

    相关文章

      网友评论

        本文标题:vue 多参数在url中传递的注意点(尽可能使用encodeUR

        本文链接:https://www.haomeiwen.com/subject/tubiihtx.html