【Vue | ElementUI】Vue離開當前頁面時彈出確認框實現

Vue離開當前頁面時彈出確認框實現

這里是廣告

個人接私活，2年java開發經驗，中小型前后端分離web項目、python爬蟲系統、桌面簡單應用等。提供開發-集成-部署一條龍服務。項目可用作課題，也可用作商用。如有需要，請發送郵件到 [e-mail] 詳細咨詢

1. 實現目的

在某種業務場景下，用戶不允許跳轉到其他頁面。於是，需要在用戶誤操作或者是點擊瀏覽器跳轉時提示用戶。

2. 實現原理

1. 使用路由守衛beforeRouteLeave進行控制
2. 如果使用瀏覽器前進后退按鈕時注意維持地址欄不變

<template>
 <div>
 </div>
</template>

<script>
export default {
 beforeRouteLeave (to, from, next) {
    // 這里需要elementui的支持，如果使用其他界面組件自行替換即可
    this.$confirm('正在離開本頁面，本頁面內所有未保存數據都會丟失', '警告', {
       confirmButtonText: '確定',
       cancelButtonText: '取消',
       type: 'warning'
     }).then(() => {
       // 正常跳轉
       next()
     }).catch(() => {
       // 如果取消跳轉地址欄會變化，這時保持地址欄不變
       window.history.go(1)
     })
 }
}
</script>

<style scoped>

</style>