//1 首先進(jìn)入頁(yè)面的時(shí)候需要監(jiān)聽(tīng)瀏覽器的后退按鈕，之后在操作的時(shí)候執(zhí)行函數(shù),在mounted中掛載去監(jiān)聽(tīng)這個(gè)事件，并在methods里面添加函數(shù)，用來(lái)判斷執(zhí)行的條件
mounted() {
   if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL)
				window.addEventListener('popstate', this.back, false)
			}
}
// 2：需要在退出頁(yè)面的時(shí)候銷(xiāo)毀這個(gè)監(jiān)聽(tīng)事件
destroyed() {
		    window.removeEventListener('popstate', this.goBack, false)
},
// 3: 在methods中添加方法，在這里不是使用`this.$router.go（-1）`，因?yàn)槭褂梅祷厣弦徊降脑?huà)，方法會(huì)一直返回到第一個(gè)頁(yè)面，
methods： {
	back() {
				this.$confirm('檢測(cè)到未保存的內(nèi)容，是否在離開(kāi)頁(yè)面前保存修改？', '確認(rèn)信息', {
						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' ?
								'放棄保存并離開(kāi)頁(yè)面' :
								'停留在當(dāng)前頁(yè)面'
						})
					});
			},
}

// 1 監(jiān)聽(tīng)瀏覽器的刷新事件，注冊(cè)方法
mounted() {
			// 監(jiān)聽(tīng)瀏覽器的刷新事件
			window.addEventListener('beforeunload', this.unload)
			// window.addEventListener('beforeunload', e => this.unload) // 注冊(cè)一個(gè)匿名函數(shù)
}
// 2 銷(xiāo)毀這個(gè)監(jiān)聽(tīng)事件
destroyed() {
          // 銷(xiāo)毀這個(gè)監(jiān)聽(tīng)事件，需要找到這個(gè)函數(shù)，如果使用的是匿名函數(shù)的話(huà)，無(wú)法查找這個(gè)函數(shù)，這個(gè)事件也就沒(méi)有辦法被移除 ，在其他頁(yè)面仍然會(huì)執(zhí)行這個(gè)監(jiān)聽(tīng)事件
			window.removeEventListener('beforeunload', this.unload)
		 },
// 3.methods添加方法
methods: {
	unload(e) {
				e = e || window.event
				if (e) {
				// 在這里阻止默認(rèn)的刷新，彈出彈框
					e.returnValue = '關(guān)閉提示'
				}
				return '關(guān)閉'
			}
}

// 禁止瀏覽器前進(jìn)后退 另一部本在router的index.js中
window.addEventListener('popstate', function() {
    history.pushState(null, null, document.URL)
})

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