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

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

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