So verwenden Sie Routennavigationswächter zur Steuerung von Routensprüngen in Vue

In Vue ist das Routing ein sehr wichtiger Teil, der Sprünge und die Navigation zwischen Seiten steuert. In der tatsächlichen Entwicklung müssen wir häufig bestimmte Routen steuern, z. B. kann der Zugriff nur erfolgen, wenn Sie angemeldet sind, oder für den Zugriff sind Administratorrechte erforderlich usw. Zu diesem Zeitpunkt müssen Sie Routing-Navigationsschutz verwenden, um die Routing-Steuerung zu implementieren.

Route Navigation Guard kann Routensprünge abfangen und einige Vorgänge vor oder nach Routensprüngen ausführen. In Vue werden Routennavigationswächter normalerweise mithilfe globaler Navigationswächter und komponenteninterner Navigationswächter implementiert. Im Folgenden stellen wir die Verwendung dieser beiden Methoden vor.

1. Global Navigation Guard

Global Navigation Guard kann das globale Routing steuern und wird normalerweise in der Vue-Instanz registriert. Der globale Navigationswächter enthält drei Hook-Funktionen:

1. beforeEach(to, from, next)

Diese Funktion wird ausgeführt, bevor die Route springt:

• to: das Routing-Objekt, das gerade springt
• from: Das aktuell übersprungene Routing-Objekt
• next: Callback-Funktion, mit der Routing-Sprünge gesteuert werden können

In der beforeEach-Funktion können wir die Route beurteilen und weiter springen, wenn die Bedingungen erfüllt sind, andernfalls verwenden die nächste Methode Abfangen oder umleiten. Um beispielsweise zu bestimmen, ob eine Anmeldung erfolgen soll:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

2. afterEach(to, from)

Diese Funktion wird ausgeführt, nachdem die Route gesprungen ist. Sie erhält zwei Parameter:

• to: das Routing-Objekt, zu dem gerade gesprungen ist
• von: gerade jetzt Das verlassende Routenobjekt

In der afterEach-Funktion können wir die Route verarbeiten, z. B. das Aufzeichnen von Zugriffsdatensätzen usw.

router.afterEach((to, from) => {
  // 记录访问记录
})

3. resolve(to, from, next)

Diese Funktion kann eine Hook-Funktion in der Routing-Konfiguration definieren, um asynchrone Routing-Sprünge zu verarbeiten.

Zum Beispiel:

{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    if (store.state.isAdmin) {
      next()
    } else {
      next('/login')
    }
  }
}

Bei der Verwendung globaler Navigationswächter ist zu beachten, dass bei der Ausführung mehrerer Wächter die nächste Methode verwendet werden muss, um die Ausführungsreihenfolge zu steuern.

2. In-Component Navigation Guard

In-Component Navigation Guard verwendet zwei Funktionen, beforeRouteEnter und beforeRouteLeave, um die Routing-Steuerung zu implementieren.

1. beforeRouteEnter(to, from, next)

Diese Funktion wird ausgeführt, bevor die Komponente instanziiert wird. Sie empfängt drei Parameter:

• to: das Routing-Objekt, das gerade springen soll
• from: die Route, die gerade ausgeführt wird aktuell springendes Objekt
• next: Rückruffunktion, die zum Steuern von Routensprüngen verwendet wird

Da in der beforeRouteEnter-Funktion die Komponente nicht instanziiert wurde, können Sie nicht direkt auf dieses Objekt zugreifen. Sie müssen daher die nächste Methode verwenden, um einen Rückruf zu übergeben Funktion. Wird ausgeführt, nachdem die Komponente instanziiert wurde.

Zum Beispiel können wir diese Funktion verwenden, um dynamische Routen zu erstellen:

{
  path: '/user/:id',
  component: User,
  beforeEnter: (to, from, next) => {
    api.getUser(to.params.id)
      .then(user => {
        to.meta.user = user
        next()
      })
      .catch(error => {
        next('/error')
      })
  }
}

2. beforeRouteLeave(to, from, next)

Diese Funktion wird ausgeführt, bevor die Komponente verlässt, und sie erhält drei Parameter:

• to: Das Routing-Objekt, das gerade springt
• von: Das Routing-Objekt, das gerade springt
• nächstes: Die Rückruffunktion, die zur Steuerung des Routensprungs verwendet wird

In der beforeRouteLeave-Funktion können wir die aktuelle Komponente verarbeiten, z Daten speichern oder Benutzer zum Warten auffordern.

Zum Beispiel können wir den Benutzer vor dem Verlassen der Seite auffordern, Daten zu speichern:

beforeRouteLeave(to, from, next) {
  if (this.formDirty) {
    if (confirm('您是否要保存数据？')) {
      this.saveData()
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

Bei der Verwendung von Navigationswächtern innerhalb der Komponente ist zu beachten, dass bei der Ausführung mehrerer Wächter die nächste Methode zur Steuerung verwendet werden muss die Reihenfolge der Ausführung.

Zusammenfassend sind Routing-Navigationswächter ein sehr wichtiger Bestandteil von Vue, der uns helfen kann, das Routing flexibel zu steuern. In der tatsächlichen Entwicklung müssen wir basierend auf den Geschäftsanforderungen eine geeignete Methode zur Verwendung von Routing-Navigationswächtern auswählen, um eine verfeinerte Steuerung des Routings zu erreichen und die Benutzererfahrung zu verbessern.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Routennavigationswächter zur Steuerung von Routensprüngen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!