vue弹窗关闭刷新实现过程的常见问题怎样解决-群英

上一篇：vue中用什么方法判断按钮能不能点击下一篇：如何利用React制作一个炫酷的圆形四级菜单

今天小编跟大家讲解下有关“vue弹窗关闭刷新实现过程的常见问题怎样解决”的内容，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。

vue弹窗关闭后刷新效果

问题

列表点击进入详情时弹窗内容重新赋值，但是修改后未点击保存再打开同一个弹窗，数据是关闭前的样子。

解决

在双击时间里定义一个时间戳，每次点击传过去的值，在弹窗watch里接收时间戳再赋值。关闭页面清空对象。

列表页：

this.timestamp=new Date().getTime();

弹窗详情页：

props: {timestamp:Number}
watch: {
   timestamp:{
     //深度监控的数据获取
  }
}

关闭或刷新vue文件弹出提示框

在vue文件中加入如下代码：

我将如下代码加入到了app.vue中

beforeRouteLeave(to, from, next) {
const answer = window.confirm(“当前页面数据未保存，确定要离开？”);
if (answer) {
next();
} else {
next(false);
}
},
mounted() {
var _this=this;
window.onbeforeunload = function(e) {
if (_this.$route.fullPath == ‘/index/uploadImages') {
e = e || window.event;
// 兼容IE8和Firefox 4之前的版本
if (e) {
e.returnValue = “关闭提示”;
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return “关闭提示”;
} else {
window.onbeforeunload = null;
}
};
}

编译运行，在浏览器刷新/关闭，弹出以下提示框