Explicación detallada de la utilización de guardianes de navegación de VueRouter

Introducción

Se utiliza principalmente para proteger la navegación a través de saltos o cancelaciones

Por ejemplo, verificar la información de inicio de sesión: si no ha iniciado sesión, todos se saltarán a la página de inicio de sesión. Verificar si se ha realizado la operación necesaria; si no, interrumpir el salto.

Se divide en tres grandes categorías: guardianes globales, guardianes de rutas y guardianes de componentes

Guardián global

beforeEach
beforeResolve
afterEach

Guardián de la ruta

beforeEnter

Guardián del componente

beforeRouteEnter
  // Llamar antes de que se confirme la ruta correspondiente al componente
  // ¡No! No se puede obtener la instancia del componente `this`
  // Porque antes de que el guardián se ejecute, la instancia del componente aún no se ha creado
  Aunque no podemos obtener directamente la fuerza del componente
  Pero podemos obtener la instancia actual para operar a través de la función de callback del parámetro next
  beforeRouteEnter: (to, from, next) => {
    next((vm) => {
      //vm es la instancia actual del componente
    });
  }
beforeRouteUpdate
  // Se llama cuando cambia la ruta actual, pero el componente se reutiliza
  // Por ejemplo, para una ruta con parámetros dinámicos /foo/:id, en /foo/1 y /foo/2 entre saltos
  // Dado que se renderizará el mismo componente Foo, la instancia del componente se reutilizará. Y este gancho se llamará en esta situación.
  // Se puede acceder a la instancia del componente `this`
beforeRouteLeave
  // Se llama cuando la navegación sale de la ruta correspondiente del componente
  // Se puede acceder a la instancia del componente `this`

Introducción de parámetros

Estos parámetros involucrados en la guardiana de navegación: to, from, next

Además de afterEach global solo hay tres parámetros para el resto

(Citado de la página web oficial)
to: Route: El objeto de la ruta que se va a ingresar
from: Route: La ruta que está a punto de salir de la navegación actual
next: Function: Es necesario llamar a este método para resolver este gancho. El efecto de la llamada depende de los parámetros de llamada del método next.
  next(): Realizar el siguiente gancho en la tubería. Si se han ejecutado todos los ganchos, el estado de la navegación es confirmed (confirmado).
  next(false): Interrumpir la navegación actual. Si la dirección URL del navegador cambia (puede ser manualmente por el usuario o el botón Atrás del navegador), la dirección URL se restablecerá a la dirección correspondiente del enrutador from.
  next('/') o next({ path: '/): Saltar a una dirección diferente. La navegación actual se interrumpe y se realiza una nueva navegación.
  next(error): (2.4.0+Si el parámetro传入next es una instancia de Error, se detendrá la navegación y el error se pasará a la función de devolución de llamada registrada por router.onError().

Mecanismo de ejecución

Esto es todo lo que les hemos presentado sobre la navegación guardiana de VueRouter, esperamos que el contenido que hemos organizado les haya sido útil, agradecemos su apoyo a la tutorial de gritos.