在不刷新和不跳转页面的情况下向URL中增删改query参数

最新更新时间：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('&');
}

参考资料

感谢阅读，欢迎评论^-^

打赏我吧^-^