Guardia de navegación del enrutador Vue para uso práctico

El funcionario dijo:

Está bien, si no entiendes, simplemente explícalo. De hecho, la guardia de navegación son algunas funciones de enlace en el proceso de salto de ruta, y luego llegar al punto de salto de ruta es un gran proceso. Este gran proceso se divide en procesos más pequeños, como el proceso antes y después del salto, y cada proceso tiene un proceso. función, esta función le permite captar el tiempo cuando opera algunas otras cosas, esta es la protección de navegación.

Primero echemos un vistazo a la captura de pantalla de la secuencia de salida después de ejecutar la función de enlace. Más adelante se presentará una explicación aproximada para brindarle una forma diferente de pensar (es decir, primero obtener una vista previa y luego estudiar). y finalmente revisar)

[Error en la carga de la imagen... (image-b044c6-1632499247491)]

Bueno, ¡las personas que no entienden pueden no entender! Pero espero que todos puedan entenderlo más claramente, volver atrás, mirar esta secuencia y dar una advertencia con anticipación.

Navigation Guard se divide en tres tipos: global, ruta personal exclusiva y componentes internos. Veamos claramente:

Global: se refiere a la función de enlace que opera directamente en la instancia de enrutamiento. Su característica es que todas las rutas configuradas por el componente se activarán, para decirlo sin rodeos, una vez que se activa el enrutamiento. Estas funciones de enlace se activarán, como se describe a continuación. El orden de ejecución de la función de enlace incluye beforeEach, beforeResolve (2.5) y afterEach (el orden de ejecución de la función de enlace se explica a continuación):

[beforeEach]: se activa antes de que salte la ruta, los parámetros incluyen a, desde, siguiente (los parámetros se introducirán por separado). Este gancho se utiliza principalmente para la verificación de inicio de sesión, es decir, para notificar con anticipación antes del salto de ruta, para evitar notificar después del salto que será demasiado tarde.

[beforeResolve] (2.5): este gancho es similar a beforeEach. También se activa antes de que la ruta salte. Los parámetros también son hacia, desde y siguiente. La explicación oficial de la diferencia con beforeEach es. de la siguiente manera:

Es decir, afterEach se llama antes de beforeEach y beforeRouteEnter del componente.

[afterEach]: a diferencia de beforeEach, se activa después de que se completa el salto de ruta. Los parámetros incluyen to, from y no next (los parámetros se introducirán por separado). beforeRouteEnter (Protección de componentes (que se analiza más adelante) antes. ).

Route-exclusive es una función de enlace que también se puede configurar al configurar una ruta individual, que es donde entra en juego el siguiente ejemplo, es decir, un componente como Foo tiene dicha función de enlace. Actualmente solo tiene una función de enlace beforeEnter:

[beforeEnter]: exactamente igual que beforeEach, si ambas están configuradas, se ejecutarán inmediatamente después de beforeEach, con los parámetros a, desde, siguiente

En el componente: una función de enlace ejecutada dentro del componente, similar al ciclo de vida del componente. El ciclo de vida es equivalente a la función de enlace del ciclo de vida agregada al componente configurado para el enrutamiento. El orden de ejecución de la función de enlace incluye beforeRouteEnter, beforeRouteUpdate (2.2) y beforeRouteLeave, y la ubicación de ejecución es la siguiente:

[beforeRouteEnter]: se llama antes de la entrada de ruta, los parámetros son hacia, desde y siguiente .

Este gancho se llama después de la guardia global beforeEach y la guardia exclusiva beforeEnter, pero antes de la global beforeResolve y la global afterEach. Es importante tener en cuenta que no se puede acceder a la instancia del componente en esta protección, es decir, no está definida, es decir, se activa antes del ciclo de vida beforeCreate. En esta función de enlace, se puede acceder a la instancia del componente pasando una devolución de llamada a next. Ejecute la devolución de llamada cuando se confirme la navegación y utilice la instancia del componente como parámetro del método de devolución de llamada. Puede solicitar al servidor que obtenga los datos en esta guardia. Cuando se obtenga con éxito y se pueda acceder a la ruta, llame a next y. acceda a la instancia del componente a través de la máquina virtual en la devolución de llamada para realizar operaciones como la asignación (la llamada a la función a continuación se monta después: para garantizar que tenga acceso completo a la instancia del componente).

[beforeRouteUpdate] (v 2.2): Se llama cuando la ruta actual cambia y se reutiliza el componente, y se accede a la instancia a través de este. Los parámetros incluyen hacia, desde y siguiente. Algunos de ustedes se preguntarán: ¿qué componentes se deben cambiar o reutilizar?

[beforeRouteLeave]: Se llama cuando la navegación sale de la ruta correspondiente del componente, se accede a la instancia del componente a través de esta, y los parámetros incluyen hacia, desde y siguiente.

Repetir:

Ganchos de enrutamiento global: beforeEach(to, from, next), beforeResolve(to, from, next), afterEach(to, from); p> Gancho de enrutamiento exclusivo: beforeEnter(to, from, next);

Hook de enrutamiento intracomponente: beforeRouteEnter(to, from, next), beforeRouteUpdate(to, from, next), beforeRouteLeave(to, from, next)

No sé si todavía recuerdas los tres parámetros hacia, from y next.

Aquí, vuelve a mirar los parámetros de estos ganchos. Si observa atentamente, encontrará que no hay siguiente en el gancho posterior a cada. ¿Por qué?

a: objeto de enrutamiento de destino;

de: objeto de enrutamiento para salir

siguiente: es el parámetro más importante, es equivalente a las cuentas de la línea, ensarte las cuentas una por una. Se deben tener en cuenta los siguientes puntos:

1. Siempre que el siguiente parámetro implique un gancho, debe llamar a next() para continuar con el siguiente gancho; de lo contrario, se detendrán operaciones como los saltos de enrutamiento.

2. Si desea interrumpir la navegación actual, llame a next(false). Si se cambia la URL del navegador (ya sea manualmente por el usuario o mediante el botón Atrás del navegador), la dirección URL se restablecerá a la dirección de la ruta de origen. (Se usa principalmente cuando falla la verificación de inicio de sesión)

3. Por supuesto, siguiente se puede usar así, siguiente('/') o siguiente({ ruta: '/' }): salta a una dirección diferente . Esto significa que se interrumpe la navegación actual y se realiza una nueva navegación. Los parámetros que se pueden pasar son los mismos que las opciones en router.push.

4. En el gancho beforeRouteEnter, el parámetro de función de devolución de llamada recibido internamente por next((vm)=gt;{}) es la instancia actual del componente vm, que se llama después de montar el ciclo de vida. , es decir, es la última de todas las funciones de protección de navegación y ciclo de vida en ejecutarse.

5.next(error): (v2.4.0) Si el parámetro pasado a next es una instancia de Error, la navegación finalizará y el mensaje de error se pasará a [router.onError()]( /api/router-instance.html2325E62596).25B925E625B32595) Registre la devolución de llamada.

Vale, recuerda esta captura de pantalla, veámosla de nuevo

[Error en la carga de la imagen... (image-940ea2-1632499247491)]

Repitamos la última secuencia:

Al hacer clic para cambiar de ruta: beforeRouterLeave--gt; beforeEach--gt; beforeEnter--gt.beforeRouteEnter--gt; afterEach--gt; gt; creado--gt; beforeMount--gt; montado--gt; la siguiente devolución de llamada de beforeRouteEnter

Cuando se actualiza la ruta: beforeRouteUpdate