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