设置URL参数而不会导致页面刷新
如何使用History.pushState()设置URL参数以避免浏览器刷新？ 如果有一个不简单的JS解决方案，是否已经有一个流行的库或jQuery的内置函数？
这是一个相关的SO问题，其中接受的答案实际上根据评论和我的测试不起作用（它删除查询字符串而不是更新值）： history.pushState（）更改查询值
为了清楚起见，我指的是查询字符串中的url参数： http://google.com/page?name=don ： http://google.com/page?name=don tim don所以我们可以将don更改为tim而不会导致重新加载。
这是我找到的一种可能的解决方案 。 但是我对使用只有2个粉丝的JS库感到紧张：P
您可以使用下面的小型库中的queryString.push('my_param_key', 'some_new_value') 。
它将使用history.push更新您的URL参数，因此浏览器不会刷新。
它只会影响您希望改变的参数，它会使路径和其他参数不受影响。
/*! query-string Parse and stringify URL query strings https://github.com/sindresorhus/query-string by Sindre Sorhus MIT License */ (function () { 'use strict'; var queryString = {}; queryString.parse = function (str) { if (typeof str !== 'string') { return {}; } str = str.trim().replace(/^\?/, ''); if (!str) { return {}; } return str.trim().split('&').reduce(function (ret, param) { var parts = param.replace(/\+/g, ' ').split('='); var key = parts[0]; var val = parts[1]; key = decodeURIComponent(key); // missing `=` should be `null`: // http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters val = val === undefined ? null : decodeURIComponent(val); if (!ret.hasOwnProperty(key)) { ret[key] = val; } else if (Array.isArray(ret[key])) { ret[key].push(val); } else { ret[key] = [ret[key], val]; } return ret; }, {}); }; queryString.stringify = function (obj) { return obj ? Object.keys(obj).map(function (key) { var val = obj[key]; if (Array.isArray(val)) { return val.map(function (val2) { return encodeURIComponent(key) + '=' + encodeURIComponent(val2); }).join('&'); } return encodeURIComponent(key) + '=' + encodeURIComponent(val); }).join('&') : ''; }; queryString.push = function (key, new_value) { var params = queryString.parse(location.search); params[key] = new_value; var new_params_string = queryString.stringify(params) history.pushState({}, "", window.location.pathname + '?' + new_params_string); } if (typeof module !== 'undefined' && module.exports) { module.exports = queryString; } else { window.queryString = queryString; } })();
回答评论中的问题，您将能够从history.state读取这些属性，该属性包含当前URL的stat值。 无论何时你前进和前进，你都会收到一个popstate事件，你将能够阅读你所推动的状态，这比处理url要容易得多。
当然，当您返回或转发到使用pushState()或replaceState()推送的历史列表中的新条目时，页面不会重新加载。
您可以在MDN中阅读有关History对象的更多信息。
这是一个我写的一个简单的函数，它不像上面的答案那样整洁，但它确实有诀窍……
function changeUrlParam (param, value) { var currentURL = window.location.href; var urlObject = currentURL.split('?'); var newQueryString = '?'; value = encodeURIComponent(value); if(urlObject.length > 1){ var queries = urlObject[1].split('&'); var updatedExistingParam = false; for (i = 0; i < queries.length; i++){ var queryItem = queries[i].split('='); if(queryItem.length > 1){ if(queryItem[0] == param){ newQueryString += queryItem[0] + '=' + value + '&'; updatedExistingParam = true; }else{ newQueryString += queryItem[0] + '=' + queryItem[1] + '&'; } } } if(!updatedExistingParam){ newQueryString += param + '=' + value + '&'; } }else{ newQueryString += param + '=' + value + '&'; } window.history.replaceState('', '', urlObject[0] + newQueryString.slice(0, -1)); }