针对链接上参数带有特殊字符的处理

Vue项目中处理URL特殊字符问题及解决方案

最新推荐文章于 2024-08-28 19:30:00 发布

原创最新推荐文章于 2024-08-28 19:30:00 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

最近测试发现一个问题，就是另一个项目跳转我这个项目，如果链接上的参数带有#号，我这边就解析不了，比如链接是：

http://localhost:8008/heat-system-web/#/load-forecast?unitName=湖南名苑1#站低区&unitCim=HD_GR_LZGRDEV2020001192

项目里使用的vue，获取链接上的参数，是使用this.$route.query获取参数，但是因为参数里带有#号，所以它只能识别#号之前的数据，所以this.$route.query获取的参数是{unitName:湖南名苑1},显然不正确

思路1：如果对方项目不动代码的话，我这边怎么处理

既然this.$route.query针对参数带有特殊字符的会获取失效，那么就舍弃这个用法，直接对window.location.href解析

    const url = decodeURIComponent(window.location.href) // 获取解码后的当前url
    const arr1 = url.split('?')
    const query = {}
    if (arr1.length > 1) {
      const arr2 = arr1[1].split('&')
      for (let i = 0; i < arr2.length; i++) {
        // 遍历数组，拿到json对象
        query[arr2[i].split('=')[0]] = arr2[i].split('=')[1]
      }
    }
    console.log(query)

虽然我这个方法可以临时解决参数里带有#号的问题，可是仔细看看代码，这边用了?和=这两个负号来分割，万一参数里有这俩个符号，不是照样会出错吗？（虽然正常线上项目基本不可能出现这种名字）

换想法

思路2：解决源头，也就是对方传参数处理下

其实这种问题的出现是对方传参数没有转码的原因，使用encodeURIComponent()转义就可以，

window.open(
  `/heat-system-web/#/load-forecast?unitName=${encodeURIComponent(
    this.choosedStationItem.unitName
  )}&unitCim=${this.choosedStationItem.unitCim}`
)

因为这种方法最规范，最简单，最后和对方沟通了下，对方改了下，跳转出来的链接就是这样的

http://localhost:8008/heat-system-web/#/load-forecast?unitName=湖南名苑1%23站低区&unitCim=HD_GR_LZGRDEV2020001192

我使用this.$route.query获取参数，发现也不需要我这边再解码，直接解码好了，获取的参数是：{unitName:湖南名苑1#站低区,unitCim:HD_GR_LZGRDEV2020001192}

ok,我这边都不需要改代码~