history(路由控制)

Posted 2020-10-11 照世明灯

 

关键对象和方法

history.pushState();   //历史记录 新增一条链接，并改变当前URL  ，页面无刷新

history.replaceState(); //替换当前URL,同时更新历史记录，  页面无刷新

 

事件

onpopstate{

　　//这三个方法会触发 onpopstate事件

　　history.forward()  //向前翻一页

　　history.back()    //向后翻一页

　　history.go()  //指定翻页

}

setTimeout(()=>history.pushState({page:1,uid:2200},‘这个参数没什么用‘,‘home.html‘),2000)

setTimeout(()=>history.pushState({page:2,cookie:303030303},‘这个还是没什么用‘,‘about.html‘),4000)



//执行回退 触发 onpopstate事件
setTimeout(()=>history.back(),6000);

window.onpopstate = function(event){
　　console.log(document.location)
　　console.log(event.state) //返回你定义的当前页面的第一个参数对象{page:1,uid:2200} 
}