前言
今天在做一个vue的搜索功能，需要从搜索结果页面跳转到细节页面，然后点击返回还能返回到刚刚的结果页面，如果只用
window.history.go(-1)当然会重新刷新搜索页面，当然是不行的。我尝试了俩种方式来修改url:
window.location.href,拼接一个搜索的key值，点击搜索的同时，刷新了页面，url改变了，功能是实现了，可是bug来了…，搜索页面闪烁后才进入结果页，而结合不跳转页面就不会发生闪烁的情况，所以当页面刷新时，vue实例都会被重新加载。
window.location.hash,url中#为网页中的一个位置，当读取此url时，页面会自动滚动到锚点处。这种方法不会向服务器发送请求，也不会重载页面。可读写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。
新增API
百度后发现HTML5为
window.history对象引入了两个新的api是
history.pushState() 和
history.replaceState()方法，它们分别可以添加和修改历史记录条目。这些方法通常与
window.onpopstate事件配合使用。两种api都能改变当前的url，不同的是，pushState在浏览器中创建一条新的历史记录，而
history.replaceState仅仅替换当前地址为指定url。HTML5 新增的历史记录 API 均可以实现无刷新更改地址栏链接，配合 AJAX 完全可以做到无刷新跳转。他们的作用非常大，可以做到改变网址却不需要刷新页面，这个特性后来用到了单页面应用中比如：vue-router，react-router-dom里面。那么下面介绍新API的使用方法
pushState方法
上面提到的这套 API 提供一种「人为操纵」浏览器历史记录的方法。
我们可以将浏览器历史记录可以看作一个「栈」。栈是一种后进先出的结构，可以把它想象成一摞盘子，用户每点开一个新网页，都会在上面加一个新盘子，叫「入栈」。用户每次点击「后退」按钮都会取走最上面的那个盘子，叫做「出栈」。而每次浏览器显示的自然是最顶端的盘子的内容。
语法:window.history.pushState(state, title, url);执行pushState函数之后，会往浏览器的历史记录中创建一条新记录，同时改变地址栏的地址内容。它可以接收三个参数，按语法顺序分别为：
一个state对象或者字符串，用于描述新记录的一些特性。这个参数会被一并添加到历史记录中，以供以后使用。这个参数是开发者根据自己的需要自由给出的。该值是后期可以通过history.state;获取当前页面的参数,
