Spiegazione dettagliata dell'uso dei guardiani di navigazione VueRouter

Introduzione

Principalmente usato per proteggere la navigazione tramite il passaggio o l'annullamento.

Ad esempio, verificare le informazioni di login: se non è loggato, saltare a pagina di login. Se l'operazione necessaria non è stata eseguita, interrompere il passaggio.

Si dividono in tre grandi categorie: guardiano globale, guardiano di percorso, guardiano del componente

Guardiano globale

beforeEach
beforeResolve
afterEach

Guardiano di percorso

beforeEnter

Guardiano del componente

beforeRouteEnter
  // Viene chiamata prima che il percorso corrispondente al componente venga confermato
  // Non è possibile ottenere l'istanza del componente `this`
  // Poiché prima dell'esecuzione del guardiano, l'istanza del componente non è stata creata
  Non possiamo ottenere direttamente l'istanza del componente
  Ma possiamo ottenere l'istanza corrente tramite la funzione di callback del parametro next per eseguire operazioni
  beforeRouteEnter: (to, from, next) => {
    next((vm) => {
      // vm è l'istanza corrente del componente
    });
  }
beforeRouteUpdate
  // Quando il percorso corrente cambia ma il componente viene riutilizzato, viene chiamata questa funzione
  // Per esempio, per un percorso con parametri dinamici /foo/:id, durante il passaggio da /foo/1 a /foo/2,
  // Poiché viene ridisegnato lo stesso componente Foo, l'istanza del componente viene riutilizzata. Questo hub viene chiamato in questo caso.
  // Puoi accedere all'istanza del componente `this`
beforeRouteLeave
  // Chiamato quando il componente corrispondente alla routing di uscita viene chiamato
  // Puoi accedere all'istanza del componente `this`

Descrizione dei parametri

I parametri coinvolti nelle guardie di navigazione sono: to, from, next

Oltre al afterEach globale che ha solo to e from, gli altri hanno tre parametri

(estratto dal sito ufficiale)
to: Route: L'oggetto routing che sta per entrare
from: Route: La routing che sta per lasciare la navigazione corrente
next: Funzione: È necessario chiamare questo metodo per risolvere l'hub. L'effetto dipende dai parametri di chiamata del metodo next.
  next(): Esegue il prossimo hub nella pipeline. Se tutti gli hub vengono eseguiti, lo stato della navigazione è confirmed (confermato).
  next(false): Interrompe la navigazione corrente. Se l'URL del browser cambia (può essere manuale o tramite pulsante di ritorno del browser), l'indirizzo URL viene reimpostato all'indirizzo della routing corrispondente a from.
  next('/') o next({ path: '/' }): Passa a un indirizzo diverso. La navigazione corrente viene interrotta e viene iniziata una nuova navigazione.
  next(error): (2.4.0+) Se il parametro passato a next è un'istanza di Error, la navigazione viene interrotta e l'errore viene trasmesso ai callback registrati con router.onError().

Meccanismo di esecuzione

Questo è tutto ciò che ti presentiamo oggi riguardo a VueRouter guardie di navigazione, speriamo che il contenuto che abbiamo organizzato ti sia utile, grazie per il tuo supporto alle guide di urla.