html5 history pushState和replaceState的使用

pushState和replaceState是一个HTML5的新接口，他们的作用非常大，可以做到改变网址却不需要刷新页面，这个特性后来用到了单页面应用中比如：vue-router，react-router-dom里面，咱们就先看看它的原理和使用案例吧。pushState说明

 

pushState

pushState方法接受三个参数，依次为：state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。最常用的方法：window.history.pushState(null,null,'download?id=1');完整使用：var oState= {title: '下载' };window.history.pushState(oState, '下载', 'download?id=1');特点：pushState()可以创建历史，可以配合popstate事件，可以使用history.go(-1)返回到上一个页面。比如：window.addEventListener('popstate', function(evt){var state = evt.state;document.title= state.title; }, false);replaceState说明

 

replaceState

replaceState和pushState原理一样使用也一样：最常用的方法：window.history.replaceState(null,null,'download?id=1');完整使用：var oState= {title: '下载' };window.history.replaceState(oState, '下载', 'download?id=1');特点：replaceState不会加入到历史记录里面，用history.go(-1)会跳过当前页面相当于是history.go(-2)。