如何在地址栏上传参和获取地址栏上的参数

如何在地址栏上传参和获取地址栏上的参数

浏览器自带的URLSearchParams可以把对象转换成查询参数

如地址栏上的参数为http://www.baidu.com?id=1&title=222
?号后面的为查询参数，参数的形式为参数名=参数值，多个参数用&符号连接

const data = { aa: 11, bb: 22 }

new一个URLSearchParams把需要转为参数的对象传进去即可

const data2 = new URLSearchParams(data)

用加号连接 查询参数对象，查询参数对象会自动隐式转换成字符串

console.log('http://www.baidu.com?' + data2)

或者自己封装一个，跟浏览器自带的URLSearchParams同理：

function objectToParamsString(paramsObj) {
      let arr = []
      for (const key in paramsObj) {
        arr.push(`${key}=${paramsObj[key]}`)
      }
      return arr.join('&')
    }
    
  console.log(objectToParamsString(data));

把参数传到了地址栏，那要怎么获取地址的查询参数呢？

一样可以通过浏览器自带的URLSearchParams下的get方法获取对应的参数

先通过location.search获取到地址栏上的全部参数

再通过URLSearchParams下的get方法获取对应的参数

const search = location.search;

console.log(search);

const searchObj = new URLSearchParams(search);

console.log(searchObj);

const id1 = searchObj.get('id')

console.log(id1);

// 简写
const id = new URLSearchParams(location.search).get('id')
console.log(id);