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