vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue监听浏览器的后退和刷新事件,阻止默认的事件

vue监听浏览器的后退和刷新事件,阻止默认的事件方式

作者:鸣拙

这篇文章主要介绍了vue监听浏览器的后退和刷新事件,阻止默认的事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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 '关闭'
			}
}

vue禁止浏览器前进和后退

最近在做着的这个项目发现了一些bug,当用户点击浏览器的前进和撤退的时候,上一页数据保存了下来并没有刷新页面,这样会出现很多奇奇怪怪的bug,我只希望用户通过按钮来跳转,然后就需要禁止浏览器的前进和后退

main.js中,增加popstate监听

// 禁止浏览器前进后退 另一部本在router的index.js中
window.addEventListener('popstate', function() {
    history.pushState(null, null, document.URL)
})

router的index.js中

// 禁止浏览器 前进和后退,另一部分在main.js中
const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior: () => {
   history.pushState(null, null, document.URL)
  }
})

我一开始是想着监听浏览器返回上一步的时候,刷新页面,但是思索直接把浏览器前进和后退直接禁用了就可以了,而且代码也会更好处理

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文