Robot framework

Pawel — Tue, 19 Mar 2024 22:11:13 +0000

Aby w Vue 3 poinformować użytkownika, że może utracić niezapisane dane przy opuszczaniu strony, musisz użyć dwóch mechanizmów:

✅ 1. beforeunload – gdy użytkownik opuszcza stronę (np. zamyka kartę, przeładowuje)
ts
Copy
Edit
onBeforeMount(() => {
  window.addEventListener('beforeunload', handleBeforeUnload)
})

onBeforeUnmount(() => {
  window.removeEventListener('beforeunload', handleBeforeUnload)
})

function handleBeforeUnload(e: BeforeUnloadEvent) {
  if (hasUnsavedChanges.value) {
    e.preventDefault()
    e.returnValue = '' // potrzebne, aby Chrome wyświetlił alert
  }
}
🔐 Uwaga: Przeglądarki nie pozwalają już na niestandardowe komunikaty – pojawia się tylko ogólny alert systemowy.

✅ 2. beforeRouteLeave – gdy użytkownik zmienia trasę w aplikacji SPA (Vue Router)
ts
Copy
Edit
import { onBeforeRouteLeave } from 'vue-router'

onBeforeRouteLeave((to, from, next) => {
  if (hasUnsavedChanges.value) {
    const confirmed = window.confirm('Masz niezapisane zmiany. Czy na pewno chcesz opuścić stronę?')
    if (confirmed) {
      next()
    } else {
      next(false) // zatrzymaj nawigację
    }
  } else {
    next()
  }
})
📦 Przykład: komponent FormView.vue
vue
Copy
Edit
<script setup lang="ts">
import { ref, onBeforeMount, onBeforeUnmount } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'

const hasUnsavedChanges = ref(false)

function handleBeforeUnload(e: BeforeUnloadEvent) {
  if (hasUnsavedChanges.value) {
    e.preventDefault()
    e.returnValue = ''
  }
}

onBeforeMount(() => {
  window.addEventListener('beforeunload', handleBeforeUnload)
})

onBeforeUnmount(() => {
  window.removeEventListener('beforeunload', handleBeforeUnload)
})

onBeforeRouteLeave((to, from, next) => {
  if (hasUnsavedChanges.value) {
    const confirmed = window.confirm('Masz niezapisane zmiany. Czy na pewno opuścić stronę?')
    next(confirmed)
  } else {
    next()
  }
})
</script>
✅ Tip: Kiedy ustawić hasUnsavedChanges = true?
Np. w v-model, @input, lub po kliknięciu „Edytuj”.

Chcesz wersję z PrimeVue ConfirmDialog zamiast window.confirm()?
DEV Community: Pawel

Robot framework
