web前端：vue中监听返回键

作者:wangnima666 更新于： 2020-03-03 10:57:19

　　万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(html)的第五次重大修改(这是一项推荐标准、外语原文:W3CRecommendation、见本处参考资料原文内容)。

　　问题：在项目中，我们常常有需求，当用户在填写表单时，点击返回的时候，我们希望加一个弹窗，确认离开吗，确认将保存为草稿

　　解决方案：利用H5的pushstate（个人理解为增加页面栈）特性与onpopup事件

　　分析：pushstate从该方法名我们可以知道是增加某种状态，会为history对象的length增加长度,点击返回键的时候会触发onpopup事件（可以联想到pop其实是数组删除的最后一个元素，符合‘栈’的思想）；

　　onpopup触发返回上一页，而pushstate仅仅是从url上进行了改变，不会校验url的内容，页面不会改变，加入当前页面为xxx/b.html,此时pushState(null,null,'a.html')，可以发现url变了，而页面的内容并没有改变，我们可以通过这来造成一种无法返回的假象

　　实施：

　　//注意：Dialog是一款弹窗的插件

　　mounted:function(){

　　//当前页面挂载的时候调用返回键的监听方法

　　this.listeningBack()

　　}

　　//当页面销毁的时候我们也要将事件监听销毁，以免影响其他内容

　　destroyed:function(){

　　window.onpopstate=null

　　},

　　methods:{

　　//监听返回键

　　listeningBack(){

　　varthat=this;//window.onpopstate方法指向window,所以要储存一下当前的vue实例

　　letroute='上一页'；//根据业务逻辑的上一页决定

　　window.onpopstate=function(){

　　//将当前页面window.location.href放入页面栈当中

　　history.pushState({},null,window.location.href);

　　Dialog.alert({

　　title:'标题',

　　message:'确认返回吗，你所填写的内容将保存为草稿'

　　}).then(()=>{

　　that.$router.push({

　　path:route

　　})

　　}).catch(

　　console.log('取消返回，留在当前页面')

　　);

　　}

　　},

　　}

　　HTML5草案的前身名为WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。