history.pushState()无刷新改变url

今天在做一个vue的搜索功能，需要从搜索结果页面跳转到细节页面，然后点击返回还能返回到刚刚的结果页面，如果只用window.history.go(-1)当然会重新刷新搜索页面，当然是不行的。

我尝试了两种方法都是通过改变url来实现，一种是window.location.href拼接一个搜索的key值，点击搜索的同时，刷新了页面，url改变了，功能是实现了，可是bug来了。。。。，搜索页面闪烁后才进入结果页，而结合不跳转页面就不会发生闪烁的情况，所以当页面刷新时，vue实例都会被重新加载。

所以解决办法就是寻找不刷新就能改变url的方法。百度许久，终于找到history，window.history引入了两个api，pushState和replaceState，我们可以很方便的达到改变url而不重载页面的目的。

两种api都能改变当前的url，不同的是，pushState在浏览器中创建一条新的历史记录，而replaceState仅仅替换当前地址为指定url

history.pushState && history.pushState({ title: value }, value, 'pushState.html?key='+value)

在我的需求中，我使用了replaceState

最后介绍另一种无刷新技巧，window.location.hash，url中#为网页中的一个位置，当读取此url时，页面会自动滚动到锚点处。这种方法不会向服务器发送请求，也不会重载页面。可读写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。