最新更新时间:2020年09月08日14:10:19
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
本文内容:在不刷新和不跳转页面的情况下向URL中增删改query参数,原理,路由push到和当前相同的路由时,页面不跳转、不刷新。
方案一:修改URL
- 更改当前URL,不刷新页面
//123 -> 456
//www.baidu.com/123?a=2 -> www.baidu.com/456?a=2
let href = window.location.href;//www.baidu.com/123?a=2
let replaceId = '/' + 123;
window.history.replaceState({}, 'title', href.replace(/\/\d+/, replaceId));
注意:window.history.pushState是路由入栈,window.history.replaceState是替换当前路由
方案二:通过react-router的history和location
- 查询query参数
const{ location } = this.props;
const { search } = location;
let queryStr = search.slice(1);//age=30&name=wanshaobo
let queryArr = queryStr.split('&');//['age=30','name=wanshaobo']
- 增加query参数
const{ history, location } = this.props;
const { search } = location;
if(search === ''){
history.push({
pathname: location.pathname,
search: 'name=wanshaobo'
});
}else{
history.push({
pathname: location.pathname,
search: search + '&name=wanshaobo'
});
}
- 修改query参数
const{ history, location } = this.props;
const { search } = location;
//增加/修改query参数
history.push({
pathname: location.pathname,
search: updateSearch('name', 'wsb')
});
//search ?age=30&name=wanshaobo -> ?age=30&name=wsb
function updateSearch(targetKey,targetValue){
const { location } = this.props;
const { search } = location;
let queryStr = search.slice(1);//age=30&name=wanshaobo
let queryArr = queryStr.split('&');//['age=30','name=wanshaobo']
let targetIndex = -1;
queryArr.forEach((item,i) => {
let key = item.split('=')[0];
if(key === targetKey){
targetIndex = i;
}
});
//如果查找不到name,返回原始search
if(targetIndex === -1){
return search;
}
let targetArr = queryArr[targetIndex].split('=');//['name','wanshaobo']
targetArr[1] = targetValue;
queryArr[targetIndex] = targetArr.join('=');//['name','wsb']
return queryArr.join('&');
}
- 删除query参数
const{ history, location } = this.props;
history.push({
pathname: location.pathname,
search: deleteSearch('name')
});
//search ?age=30&name=wanshaobo -> ?age=30
deleteSearch(targetKey){
const { location } = this.props;
const { search } = location;
let queryStr = search.slice(1);//age=30&name=wanshaobo
let queryArr = queryStr.split('&');//['age=30','name=wanshaobo']
let targetIndex = -1;
queryArr.forEach((item,i) => {
let key = item.split('=')[0];
if(key === targetKey){
targetIndex = i;
}
});
if(targetIndex === -1){
return search;
}
queryArr.splice(targetIndex,1);//['age=30']
return queryArr.join('&');
}
参考资料
感谢阅读,欢迎评论^-^