html5 history pushState和replaceState的使用

pushState和replaceState是一个HTML5的新接口，他们的作用非常大，可以做到改变网址却不需要刷新页面，这个特性后来用到了单页面应用中比如：vue-router，react-router-dom里面。
注意:仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面!

pushState说明
    pushState方法接受三个参数，依次为：
        state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
        title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
        url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

//状态对象：传给目标路由的信息,可为空
//页面标题：目前所有浏览器都不支持,填空字符串即可
//可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data
window.history.pushState(data, title, targetURL);

    最常用的方法：

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说明
    popstate事件会在点击后退、前进按钮(或调用history.back()、history.forward()、history.go()方法)时触发。前提是不能真的发生了页面跳转,而是在由history.pushState()或者history.replaceState()形成的历史节点中前进后退。
    注意:用history.pushState()或者history.replaceState()不会触发popstate事件。

    最常用的方法：

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


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！