vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認(rèn)的事件方式

更新時間：2023年10月16日 16:00:04 作者：鳴拙

這篇文章主要介紹了vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認(rèn)的事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue監(jiān)聽瀏覽器的后退和刷新事件

瀏覽器的后退事件

瀏覽器的后退按鈕，默認(rèn)是返回上一個路徑的頁面，可是如果我們當(dāng)前的頁面有數(shù)據(jù)沒有被保存的話，點擊后退按鈕應(yīng)該加一層判斷，也是提示用戶是否需要去保存頁面的內(nèi)容。

如果不保存，直接返回。

所以需要阻止瀏覽器的后退按鈕，只有在滿足了條件后才執(zhí)行事件

//1 首先進(jìn)入頁面的時候需要監(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)容，是否在離開頁面前保存修改？', '確認(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' ?
								'放棄保存并離開頁面' :
								'停留在當(dāng)前頁面'
						})
					});
			},
}

示例圖：

瀏覽器的刷新事件

和后退事件一個原因，因為我們在刷新頁面的時候，如果這個時候頁面的內(nèi)容沒有被保存的話，那之前的數(shù)據(jù)都會丟失，又需要重新填如數(shù)據(jù)，這個時候肯定心情是比較煩躁的，所以就需要在刷新的時候去提示一下，用戶是否已經(jīng)保存了內(nèi)容，因為現(xiàn)在瀏覽器的刷新控件，無法自定義里面的內(nèi)容，只有默認(rèn)的彈出層控件。所以只能通過外面添加一層判斷，判斷是否已經(jīng)保存了數(shù)據(jù)，如果沒有保存刷新的時候就提示，已經(jīng)保存的話就不提示

// 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) {
				// 在這里阻止默認(rèn)的刷新，彈出彈框
					e.returnValue = '關(guān)閉提示'
				}
				return '關(guān)閉'
			}
}

vue禁止瀏覽器前進(jìn)和后退

最近在做著的這個項目發(fā)現(xiàn)了一些bug，當(dāng)用戶點擊瀏覽器的前進(jìn)和撤退的時候，上一頁數(shù)據(jù)保存了下來并沒有刷新頁面，這樣會出現(xiàn)很多奇奇怪怪的bug，我只希望用戶通過按鈕來跳轉(zhuǎn)，然后就需要禁止瀏覽器的前進(jìn)和后退

main.js中，增加popstate監(jiān)聽

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

router的index.js中

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

我一開始是想著監(jiān)聽瀏覽器返回上一步的時候，刷新頁面，但是思索直接把瀏覽器前進(jìn)和后退直接禁用了就可以了，而且代碼也會更好處理