vue 路由跳转前确认框,刷新浏览器页面前提示确认框
先看效果图:
1.刷新页面效果:
2.跳转路由(进入别的页面前)效果:
代码:
// 路由跳转确认 beforeRouteLeave(to, from, next) { const answer = window.confirm("当前页面数据未保存,确定要离开?"); if (answer) { next(); } else { next(false); } }, // 浏览器刷新确认 把下面 '/test' 换成需要确认操作效果的页面路径,可以通过注释window.onbeforeunload函数后在控制台查看console mounted() { var _this=this; console.log(_this.$route.fullPath) window.onbeforeunload = function(e) { if (_this.$route.fullPath == '/test') { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = "关闭提示"; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return "关闭提示"; } else { window.onbeforeunload = null; } }; }