通常我们都是自己实现一个函数去拿参:
function getUrlParam() {
const ret = window.location.href.split('?')[1].split('&').map(v=>
({
[v.split('=')[0]]: v.split('=')[1]
})
)
return Object.assign(...ret);
// 深拷贝
JSON.parse(JSON.stringify(window.location.href.split('?')[1].split('&').map(i=>({[i.split('=')[0]]:i.split('=')[1]}))))
}
// es5写法
function getUrlParam() {
let ret = {};
for (let x of window.location.href.split('?')[1].split('&')) {
ret[x.split('=')[0]]= x.split('=')[1];
}
return ret;
}
另一种方法:使用new URL()
解析url
,获取一个对象urlParams
// 假设 window.location.href=https://halo.zoey.fun/posts/list?page=0&size=10&statuses=PUBLISHED&statuses=DRAFT&statuses=INTIMATE
const urlParams = new URL(window.location.href);
// 是否有这个参数,返回布尔值
urlParams.searchParams.has("page") // true
// 获取这个参数
urlParams.searchParams.get("page")// '0'
// 获取所有这个参数,返回数组
urlParams.searchParams.getAll("size"); //['10']
// 添加参数
urlParams.searchParams.append("statuses", "DCDRAFT");
// 输出所有参数
urlParams.searchParams.toString(); // 'page=0&size=10&statuses=PUBLISHED&statuses=DRAFT&statuses=INTIMATE&statuses=DCDRAFT'
// 设置参数的值
urlParams.searchParams.set("statuses", "More DRAFT");
urlParams.searchParams.toString(); // 'page=0&size=10&statuses=More+DRAFT'
// 删除参数的值
urlParams.searchParams.delete("statuses");
urlParams.searchParams.toString(); // 'page=0&size=10'