如何在地址栏上传参和获取地址栏上的参数
浏览器自带的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);