在前端日常的開發中，大多數時候我們只需用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.query或this.$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(url.indexOf("?") > -1){
        var result = [];
        var urlParamsArr = 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));
 

結果如圖所示：

是不是很簡單！這是我寫的一種實現方法，也可能會有其他更好的實現方法，歡迎各位跟我隨時溝通。