//1 首先進入頁面的時候需要監(jiān)聽瀏覽器的后退按鈕，之后在操作的時候執(zhí)行函數(shù),在mounted中掛載去監(jiān)聽這個事件，并在methods里面添加函數(shù)，用來判斷執(zhí)行的條件
mounted() {
   if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL)
				window.addEventListener('popstate', this.back, false)
			}
}
// 2：需要在退出頁面的時候銷毀這個監(jiān)聽事件
destroyed() {
		    window.removeEventListener('popstate', this.goBack, false)
},
// 3: 在methods中添加方法，在這里不是使用`this.$router.go（-1）`，因為使用返回上一步的話，方法會一直返回到第一個頁面，
methods： {
	back() {
				this.$confirm('檢測到未保存的內(nèi)容，是否在離開頁面前保存修改？', '確認信息', {
						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 監(jiān)聽瀏覽器的刷新事件，注冊方法
mounted() {
			// 監(jiān)聽瀏覽器的刷新事件
			window.addEventListener('beforeunload', this.unload)
			// window.addEventListener('beforeunload', e => this.unload) // 注冊一個匿名函數(shù)
}
// 2 銷毀這個監(jiān)聽事件
destroyed() {
          // 銷毀這個監(jiān)聽事件，需要找到這個函數(shù)，如果使用的是匿名函數(shù)的話，無法查找這個函數(shù)，這個事件也就沒有辦法被移除 ，在其他頁面仍然會執(zhí)行這個監(jiān)聽事件
			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)
  }
})