1、获取url地址后的值(包含?)
window.location.search; //获取url中"?"符后的字符串
比如url 为: https://editor.csdn.net/md/?userName=magic4j&userId=547ac1d0-385b-4219-95fa-e7964b893ee4&id=238
let query = window.location.search;
console.log(query)
// ?userName=magic4j&userId=547ac1d0-385b-4219-95fa-e7964b893ee4&id=238
2、操作字符串
let url = "?userName=magic4j&userId=547ac1d0-385b-4219-95fa-e7964b893ee4&id=238"
// 判断是否有问号
if (url.indexOf("?") != -1) {
  // 把问号去掉
  var str = url.substr(1);
  // 以&符分项组成数组
  strs = str.split("&");
  // 循环数组
  for (var i = 0; i < strs.length; i++) {
    // 每一项等号左边为属性,等号右边为属性的值,值需要使用 decodeURI() 函数对通过 escape() 或 url 编码过的字符串进行解码。
    theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
  }
}
3、decodeURI() 函数 (官方文档:https://www.runoob.com/jsref/jsref-decodeuri.html
var test1="%E9%BE%99";
test1=escape(test1); 
document.write (test1 + "<br />") ;
test1=decodeURI(test1);   
document.write (test1 + "<br />") 
4、结果如图:

在这里插入图片描述

5、完整代码:
getRequest() {
  let url = window.location.search;
  let theRequest = new Object();
  // 判断是否有问号
  if (url.indexOf("?") != -1) {
    // 把问号去掉
    var str = url.substr(1);
    // 以&符分项组成数组
    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]);
    }
  }
  return theRequest;
},
async getList(time, tab) {
  this.isData = true;
  this.data = await this.getRequest(); // 获取url后面的参数对象
  axios.get('/app/api/sw/station/chart/list?', {
    headers: {
      'userName': this.data.userName,
      'userId': this.data.userId,
      'userMoblie': this.data.userMoblie
    },
    params: {
      fast: time,
      id: this.data.id,
    }
  })
    .then(res => {
      if (res.data.code == 200) {
        this.stationCode = res.data.data.stationCode;
        this.tabList = res.data.data.stationChartVos;
        // 当前tab下的对象数据
        if (this.tabList.length > 0) {
          // 默认第一项
          if (this.tabName == "") {
            this.tabName = this.tabList[0].name;
          }
          this.dataObj = this.tabList[tab];
          this.getOption(this.tabList[tab]);
        } else {
          this.dataObj = {}
          this.getOption([])
        }
        this.isData = false;
      } else {
        this.getOption([]);
        this.dataObj = {};
        this.isData = false;
      }
    })
    .catch(res => {
      this.getOption([]);
      this.dataObj = {};
      this.isData = false;
    })
},
6、其它参数获取:
1、设置或获取 href 属性中在井号“#”后面的分段。(window.location.hash)
如url为:"https://ja31hg.axshare.com/#id=dxpi19&p=%E9%A6%96%E9%A1%B5%E5%91%8A%E8%AD%A6%E4%BF%A1%E6%81%AF%E6%B5%8B%E8%BE%B9%E4%BF%A1%E6%81%AF%E5%B1%95%E7%A4%BA%EF%BC%88%E6%96%B0%EF%BC%89&g=1"
alert(window.location.hash)  // #id=dxpi19&p=%E9%A6%96%E9%A1%B5%E5%91%8A%E8%AD%A6%E4%BF%A1%E6%81%AF%E6%B5%8B%E8%BE%B9%E4%BF%A1%E6%81%AF%E5%B1%95%E7%A4%BA%EF%BC%88%E6%96%B0%EF%BC%89&g=1
2、设置或获取 URL 的协议部分。(window.location.protocol)
alert(window.location.protocol); // https:
3、设置或获取对象指定的文件名或路径。(window.location.pathname)
alert(window.location.pathname); //  /
4、设置或获取整个 URL 为字符串。(window.location.href)
alert(window.location.href); // https://ja31hg.axshare.com/#id=dxpi19&p=%E9%A6%96%E9%A1%B5%E5%91%8A%E8%AD%A6%E4%BF%A1%E6%81%AF%E6%B5%8B%E8%BE%B9%E4%BF%A1%E6%81%AF%E5%B1%95%E7%A4%BA%EF%BC%88%E6%96%B0%EF%BC%89&g=1
5、设置或获取与 URL 关联的端口号码。(window.location.port)
alert(window.location.port); //  " "
6、设置或获取 href 属性中跟在问号后面的部分。(window.location.search)
alert(window.location.search); // " "
7、设置或获取 location 或 URL 的 hostname 和 port 号码。(window.location.host)
alert(window.location.host); // ja31hg.axshare.com
7、解析 url 中的参数,得到对象形式key: value
/**
 * 解析 url 中的参数
 * @param url
 * @returns {Object}
 */
function 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
}

烟花易冷,保持愉悦!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐