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

猜你喜欢

转载自blog.csdn.net/u010433704/article/details/86533962
今日推荐