Vue.js——监听弹框页面关闭,回刷原页面

本文介绍了一种在外部页面关闭后自动刷新当前页面的方法,利用Vue.js通过对象监听的方式监测目标页面状态,实现页面的自动刷新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

问题需求

按钮嵌入另一个系统的页面,在该页面关闭后需要回刷原页面。困难在于链接的目标页面的js不在本系统,只能通过监听页面关闭,再回刷原页面。

实现思路

通过对象监听方式实现。将链接的目标页面作为对象监听,监听该对象是否关闭,同时判断是否回刷原页面。

附上Vue.js代码

huishuaOnClick: function() {
				//将链接目标页面作为对象
				var spwindowObj=window.open({
					name: "_blank",
					url: "sp/sp/"+ this.ywid + "/" + this.yzzwsList[0].cBh + "/" + this.cbbm+"/2007",
					width: 1024,
					height: 768,
					footerHide:true,
				});

				//设置循环,没1s进行监听判断spwindowObj是否关闭
				var loop = setInterval(function () {
					//判断当链接目标窗口关闭,则刷新原页面
					if(spwindowObj.closed){
						window.location.reload();
					}
				},1000);
}
### Vue 中点击分页时页面的解决方案 在 Vue 应用中,当用户点击分页按钮时如果发生页面新,通常是因为事件未被正确阻止或者存在全局监听器干扰。以下是针对此问题的具体分析和解决方案。 #### 1. 阻止默认行为 确保在绑定分页组件的 `click` 或其他交互事件时,调用了 `event.preventDefault()` 来阻止浏览器的默认新操作。可以通过如下方式实现: ```javascript methods: { handlePageChange(event) { event.preventDefault(); // 阻止默认行为 console.log('当前页码:', this.currentPage); // 执行分页逻辑 } } ``` 上述代码通过显式调用 `preventDefault` 方法防止了不必要的新[^1]。 #### 2. 动态管理响应式数据 如果分页功能涉及动态更新某些状态变量,则需要注意 Vue 的响应式机制限制。例如,在已有的实例上新增属性不会自动触发视图更新。可以采用以下方法之一来解决问题: - 使用 **Vue.set** 显式设置新属性: ```javascript this.$set(this.paginationData, 'newField', value); // 设置新的字段并保持响应性 ``` 这种方法适用于需要向对象添加新键值对的情况[^2]。 - 替换整个对象以强制重新渲染: ```javascript this.paginationData = { ...this.paginationData, newField: value }; // 利用扩展运算符替换旧对象 ``` 这种方式简单有效,尤其适合小型项目或局部场景下的快速修复。 #### 3. 加载动画优化用户体验 为了提升用户体验,可以在切换分页期间显示加载提示(loading)。这不仅掩盖可能存在的延迟现象,还能让界面显得更加流畅自然。具体做法如下所示: ```html <el-table v-loading="isLoading"> </el-table> ``` 配合 JavaScript 控制 loading 状态的变化: ```javascript data() { return { isLoading: false, }; }, methods: { async changePage(pageNumber) { try { this.isLoading = true; const response = await fetch(`/api/data?page=${pageNumber}`); const data = await response.json(); this.tableData = data.items; // 更新表格数据 } finally { this.isLoading = false; } }, }, ``` 这里利用了一个布尔型标志位控制加载层的可见性,并结合异步请求完成实际的数据获取过程[^3]。 --- #### 总结 综合以上三点建议——即合理处理 DOM 事件、妥善维护响应式数据结构以及引入过渡效果改善视觉体验——能够有效地应对 Vue 分页过程中遇到的各种挑战。最终达成既满足功能性需求又兼顾良好交互感受的目标。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Walter Sun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值