protección de enrutamiento de vue

Protección de enrutamiento de Vue, también conocida como gancho de enrutamiento, protección de navegación o gancho de navegación. La protección de navegación proporcionada por vue-router se utiliza principalmente para proteger la navegación saltando o cancelando. Existen múltiples oportunidades de creación durante la navegación de rutas: globalmente, individualmente para una ruta individual o a nivel de componente.

Utilice router.beforeEach para registrar la ruta global antes de la protección.

Cuando se activa la navegación, se llamará a los guardias anteriores globales en el orden en que fueron creados. Estas protecciones se resolverán de forma asíncrona y la navegación esperará a que se resuelvan todas las protecciones.

Este método requiere tres parámetros:

a: Ruta, el objeto de ruta de destino al que ingresar

desde: Ruta, la ruta que la navegación actual está a punto de tomar dejar

p>

siguiente. Función que se debe llamar para resolver el problema del gancho. Su implementación depende de llamar al siguiente método con parámetros.

? next(): ejecuta el siguiente enlace en la tubería. Si se han ejecutado todos los enlaces, se confirma el estado de navegación.

? next(false): Interrumpir la navegación actual: Interrumpir la navegación actual. Si la URL del navegador cambia (ya sea manualmente por el usuario o por el botón Atrás del navegador), la dirección URL se restablecerá a la dirección de la ruta de origen.

? next('/') o next({ path: '/' }): salta a una dirección diferente. La navegación actual se interrumpirá y se realizará una nueva navegación. Puede pasar cualquier objeto de ubicación al siguiente y permitir opciones de configuración como reemplazar: verdadero, nombre: 'casa' y cualquier opción utilizada en el accesorio de router-link o router.push.

? (2.4.0) Si el argumento pasado a next es una instancia de Error, la navegación finalizará y el mensaje de error se pasará a la devolución de llamada registrada a través de router.onError().

Asegúrese de llamar al siguiente método; de lo contrario, el enlace no se resolverá.

Utilice router.afterEach para registrar una guardia global.

A diferencia de los preprotectores, los postprotectores no tienen función de siguiente y no cambian la navegación en sí.

Esta es una característica nueva en vue 2.5.0. Utilice router.beforeResolve para registrar la protección de resolución global.

Esto es similar a router.beforeEach, excepto que se llamará a la protección de análisis antes de que se confirme la navegación y después de que se hayan analizado todas las protecciones dentro de los componentes y los componentes de enrutamiento asíncrono.

Como sugiere el nombre, los enlaces de navegación específicos de una única ruta se registrarán directamente en la configuración de la ruta usando boforeEnter.

Se utiliza de la misma manera que la protección global, excepto que la protección global funciona globalmente, mientras que la protección específica de ruta solo funciona en la ruta donde se establece la protección.

Las protecciones en los componentes incluyen beforeRouteEnter, beforeRouterUpdate y beforeRouteLeave.

Se llama antes de que se confirme la ruta correspondiente del componente renderizado.

Pero esto no significa que no puedas acceder a la instancia del componente en beforeRouteEnter, podemos acceder a la instancia del componente pasando la devolución de llamada a next. Esta devolución de llamada se ejecutará cuando se confirme la navegación y luego tendrá acceso a la instancia del componente.

Este método se agregó en la versión 2.2 de vue-router. Esto se debe a que en la versión original, beforeRouteLeave no se activaba si se saltaba entre dos subrutas. Esto hace que algunas operaciones de reinicio se activen de la nada.

Anteriormente, usábamos watch. Pero con este gancho tenemos una mejor manera.

Este tipo de protección de salida se utiliza a menudo para evitar que los usuarios se vayan repentinamente antes de guardar los cambios. Esta navegación se puede cancelar mediante siguiente (falso).