Saltar al contenido

Navigation Blocking

Abrir en ChatGPT

El bloqueo de navegación añade una o más capas de control a toda la API del enrutador subyacente. Si hay controladores de bloqueo presentes, la navegación se evitará de la siguiente manera:

Si la navegación es desencadenada por algo controlado a nivel de enrutador, puedes realizar cualquier tarea o mostrar un aviso en la interfaz de usuario al usuario para confirmarla acción. Cada componente que implemente el WillLeaveObserver en el árbol de rutas será llamado. El implementador debe invocar accept para continuar con la navegación o reject para bloquearla. Si múltiples componentes implementan el WillLeaveObserver en el árbol de la ruta, los controladores de veto se ejecutarán secuencialmente en orden inverso.

Ejemplo práctico de manejo de veto

Para ver cómo funciona el veto en la práctica, consulta los ejemplos de uso de observadores de ciclo de vida.

Para los eventos de página que no se pueden controlar directamente, el enrutador no interfiere ni impone un comportamiento específico. Sin embargo, los desarrolladores aún pueden escuchar el evento beforeunload para hacer un intento final de advertir al usuario sobre datos no guardados si es necesario.

PageEventOptions options = new PageEventOptions();
options.setCode("""
event.preventDefault();
return true;
""");
Page.getCurrent().addEventListener("beforeunload", e -> {}, options);

Botón de retroceso del navegador

El botón de retroceso opera fuera del control de las aplicaciones web, lo que dificulta interceptar o prevenir su acción de manera consistente en todos los navegadores. En lugar de intentar bloquear el botón de retroceso, es más efectivo diseñar tu UI/UX de una manera que mitigue el impacto. Considera estrategias como guardar datos no guardados en almacenamiento de sesión, para que si un usuario navega y regresa, su progreso se restaure de manera segura. Este enfoque asegura la protección de datos sin depender de un comportamiento de navegador poco confiable.