vue监听浏览器的后退和刷新事件

浏览器的后退事件

浏览器的后退按钮,默认是返回上一个路径的页面,可是如果我们当前的页面有数据没有被保存的话,点击后退按钮应该加一层判断,也是提示用户是否需要去保存页面的内容。如果不保存,直接返回。所以需要阻止浏览器的后退按钮,只有在满足了条件后才执行事件

//1 首先进入页面的时候需要监听浏览器的后退按钮,之后在操作的时候执行函数,在mounted中挂载去监听这个事件,并在methods里面添加函数,用来判断执行的条件
mounted() {
   if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL)
				window.addEventListener('popstate', this.back, false)
			}
}
// 2:需要在退出页面的时候销毁这个监听事件
destroyed() {
		    window.removeEventListener('popstate', this.goBack, false)
},
// 3: 在methods中添加方法,在这里不是使用`this.$router.go(-1)`,因为使用返回上一步的话,方法会一直返回到第一个页面,
methods: {
	back() {
				this.$confirm('检测到未保存的内容,是否在离开页面前保存修改?', '确认信息', {
						distinguishCancelAndClose: true,
						confirmButtonText: '保存',
						cancelButtonText: '放弃修改'
					})
					.then(() => {
						// this.$router.go(-1)
						this.$router.push('/about')
						// this.$message({
						// 	type: 'info',
						// 	message: '保存修改'
						// });
					})
					.catch(action => {
						this.$message({
							type: 'info',
							message: action === 'cancel' ?
								'放弃保存并离开页面' :
								'停留在当前页面'
						})
					});
			},
}

示例图:
在这里插入图片描述

浏览器的刷新事件

和后退事件一个原因,因为我们在刷新页面的时候,如果这个时候页面的内容没有被保存的话,那之前的数据都会丢失,又需要重新填如数据,这个时候肯定心情是比较烦躁的,所以就需要在刷新的时候去提示一下,用户是否已经保存了内容,因为现在浏览器的刷新控件,无法自定义里面的内容,只有默认的弹出层控件。所以只能通过外面添加一层判断,判断是否已经保存了数据,如果没有保存刷新的时候就提示,已经保存的话就不提示

// 1 监听浏览器的刷新事件,注册方法
mounted() {
			// 监听浏览器的刷新事件
			window.addEventListener('beforeunload', this.unload)
			// window.addEventListener('beforeunload', e => this.unload) // 注册一个匿名函数
}
// 2 销毁这个监听事件
destroyed() {
          // 销毁这个监听事件,需要找到这个函数,如果使用的是匿名函数的话,无法查找这个函数,这个事件也就没有办法被移除 ,在其他页面仍然会执行这个监听事件
			window.removeEventListener('beforeunload', this.unload)
		 },
// 3.methods添加方法
methods: {
	unload(e) {
				e = e || window.event
				if (e) {
				// 在这里阻止默认的刷新,弹出弹框
					e.returnValue = '关闭提示'
				}
				return '关闭'
			}
}

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐