首先在mounted（）添加一個監(jiān)聽事件
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL)
window.addEventListener('popstate', this.back, false)
}
接著編輯這個事件
- 在本頁面是否有在退出需要前完成的操作
- 添加提示的信息瘫寝，
- 返回上一級的的路由信息
// 瀏覽器回退
back() {
this.$confirm(
'檢測到未保存的內(nèi)容，是否在離開頁面前保存修改刨疼？',
'確認信息',
{
distinguishCancelAndClose: true,
confirmButtonText: '保存',
cancelButtonText: '放棄修改'
}
)
.then(() => {
// this.$router.go(-1)
//保存文件
this.saveDB()
this.$router.push('/workbench')
})
.catch(action => {
this.$message(
{
type: 'info',
message:
action === 'cancel' ? '放棄保存并離開頁面' : '停留在當前頁面'
},
this.$router.push('/workbench')
)
})
},
最后別忘了銷毀這個監(jiān)聽事件
第一種寫到mounted()里面(這樣寫比較方便)
this.$on('hook:beforeDestroy', () => {
window.removeEventListener('popstate', this.back, false)
})
第二種寫到destroyed()里面
// 需要在退出頁面的時候銷毀這個監(jiān)聽事件
window.removeEventListener('popstate', this.back, false)
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
