html5 history pushState和replaceState的使用

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

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和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)。

好了今天的知识就分享到这里，如果觉得有用就分享一下吧。