Estoy trabajando en un proyecto vue.js/vue-router (vue 3, vue-router 4). En este proyecto, tengo un panel deslizante que puede activar desde diferentes vistas. En este panel deslizante, hay un botón "cerrar" para cerrarlo.
Para mejorar la experiencia móvil cuando el panel está abierto, me gustaría cerrar el panel cuando presione el botón anterior del navegador en lugar de retroceder en el historial.
A partir de ahora, probé cosas con router.beforeEach , y estoy cerca de encontrar la solución con algo así:
router.beforeEach(async (to, from) => { if(panel_is_visible) { // if the panel is visible, close it and do not go to the "to" view functionToCloseThePanel() return { from }; } })Con este código, el comportamiento es casi bueno: después de presionar el botón anterior del navegador, la vista es la vista "desde", pero la URL es la anterior a la vista "desde" ... Como si el "botón atrás" todavía cambiara la URL, pero la aplicación muestra la vista correcta.
Cuando escribo exactamente el nombre de la vista que quiero dentro de la declaración de devolución, funciona (url ok y view ok). Pero el uso de la variable "desde" no funciona completamente como esperaba (la URL no y la vista están bien).
Tienes alguna pista ?
Encontré una solución, solo necesito hacer un return false; como se explica aquí: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
router.beforeEach(async (to, from) => { if(panel_is_visible) { // if the panel is visible, close it and do not go to the "to" view functionToCloseThePanel() return false; } })