通过window.location.href 或 window.location.search 获取url的参数集合以及某个参数的值

1、先了解 window.location 的各个属性:

通过window.location.href 或 window.location.search 获取url的参数集合以及某个参数的值_第1张图片

属性名 描述
href 完成的url
host 主机名和当前url的端口号
hash 从#号开始的url(锚)
hostname 当前url的主机名
port 当前url的端口号
pathname 当前url的路径部分
protocol 当前url的协议
search 从?开始的url(查询部分)
通过window.location.href 或 window.location.search 获取url的参数集合以及某个参数的值_第2张图片
2、使用 window.location.href 获取参数对象集合
// 第一种方法
const parseUrlParams = (url) => {
  const params = {}
  if (!url || url === '' || typeof url !== 'string') {
    return params
  }
  const paramsStr = url.split('?')[1]
  if (!paramsStr) {
    return params
  }
  const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ')
  for (let i = 0; i < paramsArr.length / 2; i++) {
    const value = paramsArr[i * 2 + 1]
    params[paramsArr[i * 2]] =
      value === 'true' ? true : value === 'false' ? false : value
  }
  return params
};
let param = parseUrlParams(window.location.href).token // window.location.href = http://localhost:3000/#/home?
token=fdsafadsfas
console.log(param) // fdsafadsfas
// 第二种方法 (获取url某个参数的值)
const getValueByUrlParams = (paras) => {
  let url = window.location.href;
  var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
  var paraObj = {}
  var i, j
  for (i = 0; j = paraString[i]; i++) {
  paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
  }
  var returnValue = paraObj[paras.toLowerCase()];
  if (typeof(returnValue) == "undefined") {
  return "";
  } else {
  return returnValue;
  }
};
let param = getValueByUrlParams("token")  // window.location.href = http://localhost:3000/#/home?
token=fdsafadsfas
console.log(param) // fdsafadsfas
3、通过window.location.search 获取参数集合(注意一个参数以及多个参数)
const getRequest = (url) => {
  // var url = window.location.search; //获取url中"?"符后的字串
  let theRequest = new Object();
  // 判断是否有问号
  if (url.indexOf("?") != -1) {
    // 把问号去掉
    var str = url.substr(1);
    // 判断是否有多个参数
    if(str.indexOf("&") != -1) {
      // 以&符分项组成数组
      let strs = str.split("&");
      for (var i = 0; i < strs.length; i++) {
        // 循环数组
        // theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        // 每一项等号左边为属性,等号右边为属性的值,值需要使用 decodeURI() 函数对通过 escape() 或 url 编码过的字符串进行解码。
        theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
      }
    } else {
      // 只有一个参数
      let arr = str.split("=");
      theRequest[arr[0]] = arr[1];
    }
  };
  return theRequest;
};
let obj = getRequest(window.location.search);  // window.location.href = http://localhost:3000/#/home?
token=fdsafadsfas
console.log(obj) // {token: "fdsafadsfas"}

控制情绪,保持平静!

你可能感兴趣的:(个人项目,知识累积,vue+,vite,+,antdv,前端,javascript,开发语言,获取url参数,windowlocation)