获取浏览器地址栏参数

一、很对时候在路由跳转时或者在打开一个运维配置的服务时,地址上传入我们需要的参数,下面我就依照我项目中的案例讲一下获取参数的简单方法

1、例如我们当前的地址是这样的

   

 我们在控制台打印一下location

 接下来我们封装一个方法

// 获取参数的方法
getSearchParams(search) {
    const searchParams = {}
    const searchStr = search.substring(1)	// 如果location中有search值,去除search值中的第一个字符‘?’
    const searchArr = searchStr.length ? searchStr.split('&') : [] // 以 & 符为分隔符,解析出key value 组合,组合的形式为'key=value'
    searchArr.forEach(item => {
      let keyAndValue = item.split('=')	// 以 = 为分隔符,解析出key 和 value,其中数组的第一项为key,数组的第二项为value
      let key = decodeURIComponent(keyAndValue[0])    // 如果查询参数中包含中文,会被编码成一串字符串,需要使用decodeURIComponent进行解码
      let value = decodeURIComponent(keyAndValue[1])
      if (key) {
        searchParams[key] = value
      }
    })
    return searchParams
  }




 const splitUrl = window.location.search;
 let searchData = this.getSearchParams(splitUrl)
 console.log(searchData)

 会看到我们打印的值是

 这样我们就可以从searchData中解析我们需要的数据啦~

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值