刷新或跳转当前页面时 vue单页提示保存

前言

最近公司的vue项目中有一个要求，要求在当前页面刷新或跳转时，提示保存和取消刷新，防止填写表单的内容丢失。一开始觉得很简单，直接在Router的钩子里判断就可以了，但是会发现还是有新的问题，在浏览器刷新，当前页面关闭的时候无法监控。最后通过window.onbeforeunload成功解决，所以用这篇文章简单记录一下整个解决过程。

虚拟路由器挂钩：

路由挂钩可以分为全局、单路由独占和组件级。为了解决上述需求，只使用了组件级路由钩子，因此本文只介绍组件级路由钩子。需要全局和单路专属路由挂钩的同学可以去vue-router官网查看介绍：

有三种类型的组件级路由挂钩：

BeforeRouteEnter:成功获取并进入路线时(在渲染此组件对应的路线被确认之前)，beforeRouteUpdate:调用before route当前路线改变时释放，但此组件被重用：在导航对应的路线时调用具体的介绍和写法离开此组件如下：

Const foo={template: `.`，beforerouteenter (to，from，next){//在确认用于呈现此组件的相应路由之前调用。//没有！可以！获取组件实例` this` //因为在guard执行之前还没有创建组件实例//您可以通过传递回调到next(vm={//通过` vm')}、beforerouteupdate (to、from、next){//来访问组件实例next，当当前路由改变时，但是当组件被重用时，//例如，对于具有动态参数的path /Foo/:id，在/foo/1和/foo/2之间跳转时，//因为将呈现相同的Foo组件，所以组件实例在这种情况下会调用这个钩子。//可访问组件实例` this` //不支持传递回调(因为此实例已经创建并可以获取，所以没有必要)next ()}，before route eleve(to，from，next){//在导航离开此组件的相应路由时调用//可访问组件实例` this` //此导航可由next(false)取消。const答案=window.confirm('您真的要离开吗？您有未保存的更改！)if (answer) {next()} else {//不支持传递回调(因为这个实例已经创建并且可以获取，所以没有必要)next(false)} }注意：beforeRouteLeave在刷新当前页面时不会触发，只会在进入其他页面时触发，但是beforeRouteEnter在刷新时会触发。

用beforeRouteLeave作为路由钩子，我们可以在用户想要离开这个页面的时候进行提示！

Beforerouteleave (to，from，next){ const answer=window . confirm('当前页面数据未保存，是否确定要离开！[图片](http://note .有道.com/favicon.ico)？)if(答案){next ()} else {next (false)}}显示以下提示框：

监控浏览器刷新和页面关闭事件

但是，我们的最终需求在这个时候实现了吗？不，还有一个步骤：使用window.onbeforeunload来监视浏览器刷新事件。当然，为了防止从当前单页跳转后刷新新页时触发窗口onbeforeunload的问题，我们不仅要及时添加onbeforeunload事件，还要及时删除这个事件。有两种解决方案可供选择：

通过判断其路由是否为当前需要添加禁止刷新的页面

mounted(){ window . onbeforeunload=function(e){ if(_ this)。$ route . full PATH=='/layout/add '){ e=e | | window . event；//与IE8和Firefox 4之前的版本兼容if(e){ e . return value=' close prompt '；}//chrome、safari、Firefox 4、opera 12、ie 9返回‘关闭提示’；} else { window . onbeforeunload=null } }；在destory或beforeDestory的生命周期中直接为空onbeforeunload事件

mounted(){ window . onbeforeunload=function(e){ e=e | | window . event；//与IE8和Firefox 4之前的版本兼容if(e){ e . return value=' close prompt '；}//chrome、safari、Firefox 4、opera 12、ie 9返回‘关闭提示’；}};销毁(){window.onbeforeunload=null}显示以下提示框：

摘要

最后，在beforeRouteLeave和onbeforeunload的共同作用下，无论是刷新、跳转还是关闭，都完美解决了及时保存的需求！不过还是有一点遗憾，那就是onbeforeunload中的项目符号框自定义提示设置永远无法生效。如果有更适合的治疗方法，请交流指正！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。