js以键值对的方式获取URL的参数

在前端日常的开发中,大多数时候我们只需用js获取到url中的参数即可,这个实现起来也很方便如:

function getQueryString(value) {
      const reg = new RegExp('(^|&)' + value + '=([^&]*)(&|$)');
      const r = window.location.search.substr(1).match(reg) || window.location.hash.substring((window.location.hash.search(/\?/)) + 1).match(reg);
      if (r != null) {
            return decodeURIComponent(r[2]);
      } 
}

使用方法如:getQueryString('appId')

以上的方法是包含了url中不含hash获取参数的方式以及包含hash获取参数的方式,是可以一次获取一个参数的。

如果你使用的是VUE,那么获取参数就更简单了:this.$route.querythis.$route.params

可实际的开发中,比如有这样一个需求:

单点登录中的A系统的某个页面没有登录,它就会来到一个统一的登录界面并在url中携带有它当前页面的地址和参数,参数可能还会有多个,在登录成功后,需要再返回到之前访问的页面并且还要把该页面的参数再放在url中一并返回,而且每个页面、每个系统的参数名可能还不一样,所以你就不能把返回的参数名写死,那是不是就很难办呢?

难办?卧槽,那就别办了!

乌鸦哥就是霸气!!!开玩笑哈,再难办,在我们的开发中,只要有需求,我们就要办!办它!!!

哈哈哈... 其实好办,在登录页面用js获取到它传过来的参数的键值对,再把这些键值对拼接到要返回的url的后边即可:

    var url = "http://localhost:9527/login?appId=123&backUrl=http://www.baidu.com?id=789&type=info";
    // var url = window.location.href;

    function getUrlParams(url){
      if(decodeURIComponent(url).indexOf("?") > -1){
        var result = [];
        var urlParamsArr = decodeURIComponent(url).split("?");
        urlParamsArr.shift();
        let newUrlParamsArr = urlParamsArr.join("&").split("&");
        for(var i = 0; i < newUrlParamsArr.length; i++){
          var paramKey = newUrlParamsArr[i].split("=")[0];
          var paramValue = newUrlParamsArr[i].split("=")[1];
          result.push({
            key: paramKey,
            value: paramValue
          })
        }

        return result;
      }else{
        console.log("该URL中不含参数")
      }
    }
    console.log(getUrlParams(url));

结果如图所示:
js以键值对的方式获取URL的参数_第1张图片

是不是很简单!这是我写的一种实现方法,也可能会有其他更好的实现方法,欢迎各位跟我随时沟通。

你可能感兴趣的:(js以键值对的方式获取URL的参数)