Question

我想：

在不重新加载页面的情况下附加查询字符串
让查询字符串传递到下一页而不会脱落
避免使用jQuery

到目前为止，我发现pushState / replaceState满足＃1但它没有进入下一页（失败＃2）。奇怪的是，我使用push / replaceState的本地测试同时满足了＃1和＃2，但在生产中，查询字符串在以下页面中脱落。

例如，当用户登陆页面时，我会附加一个查询字符串。

window.location.href.indexOf('?') > -1 ? appendQuery('&') : appendQuery('?');
function appendQuery(queryMark){
if (history.replaceState) {
    var newurl = window.location.href + queryMark + 'QUERYSTRING';
    window.history.replaceState({path:newurl},'',newurl);
}   
}

但是，使用此代码可以查看＆＃39; QUERYSTRING＆＃39;导航到站点中的其他页面时，不会保留附加内容。如何使查询字符串保持附加到以下页面？

Answer 1

您实际上并未通过调用window.history.replaceState或window.history.pushState向服务器发出请求（即您只是在客户端更改状态），这意味着服务器根据您传递给replaceState / pushState方法的网址，无法使用下一页为您服务。

你想做什么可能是window.location对象？使用location.assign(newUrl)或location.replace(newUrl)，您应该能够在保持查询参数的同时导航到新页面，因为它实际上向服务器发出请求。

PS：对于像React或Vue这样的客户端库，或者像Angular这样的框架，您可以使用历史对象导航到不同的页面，因为从一个页面到另一个页面的导航是在客户端处理而不请求服务器。我的答案基于您不使用任何处理客户端导航的客户端库/框架的假设。

JavaScript：为什么在下一页上附加带有push / replaceState的查询字符串？

1 个答案: