- 在WebApp或浏览器中，会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。
简单介绍history中的操作
- window.history.back()，后退
- window.history.forward()，前进
- window.history.go(num),前进或后退指定数量历史记录
- window.history.pushState(state,title,url),在页面中穿件一个history实体。直接添加到历史记录中。参数： state:储存一个对象，可以添加相关信息，可以使用history.state读取其中的内容。title: 历史记录的标题，url:创建的历史记录rul，进行历史记录操作时会跳转到该链接。
- window.history.replaceState()，修改当前的history实体。
- popstate事件，history实体改变时触发事件
- window.history.state,会获得history实体中的state对象。
使用方法
取消默认的返回操作
- 添加一条history实体作为替代原来的history实体
mounted () {
if(window.history&&window.history.pushState){
history.pushState(null,null,document.URL)
window.addEventListener('popstate', this.goBack, false);
}
},
destroyed(){
window.removeEventListener('popstate',this.goBack,false);
},
methods:{
goBack(){
this.$router.replace({path:'/'});
//replace替换原路由，作用是避免回退死循环
}
}
