js修改地址栏url_前端实战总结如何在不刷新页面的情况下改变URL

由于公司最近有个需求是想让我们的get请求的参数都直接显示在浏览器url上，这样我们就可以直接通过复制url来显示对应的界面数据了。

背景介绍

由于我们常用的http请求一般是基于XHR对象的实现或者fetch实现，这种请求操作并不会触发浏览器url的变化，这样虽然也能正常请求数据并渲染到页面，但是如果用户在当前页面操作了某个get请求并得到了某条数据，想通过链接将当前看到的界面分享给其他人时，那么此时浏览器url并不会变化，通过链接只能访问到初始化的数据界面，此时并不能达到理想的效果。如下图所示：

(单纯使用ajax或者fetch实现get请求时)

当我们在该页面将列表切换到第二页时，浏览器url并没有变化，所以将链接复制给其他人打开并不会将列表结果切换到第二页，而是重新初始化。

实现过程

通过以上的背景和问题，我们可以想想可以怎么实现呢？我的第一个反应就是使用location API来实现，我们可以使用location.search来读写浏览器query参数：

</