Was sind die Navigationswächter von Vue?

Navigationswächter umfassen: 1. Globaler Frontwächter „beforeEach“; 2. Globaler Parsingwächter „beforeResolve“; 3. Routenexklusiver Wächter „beforeEnter“;

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer. Der von

vue-router bereitgestellte Navigationsschutz wird hauptsächlich zum Schutz der Navigation durch Springen oder Abbrechen verwendet. Es gibt mehrere Möglichkeiten, den Routennavigationsprozess zu integrieren: global, exklusiv für eine einzelne Route oder auf Komponentenebene.

Denken Sie daran, dass Änderungen an Parametern oder Abfragen keine Ein-/Ausstiegs-Navigationsschutze auslösen. Sie können auf diese Änderungen reagieren, indem Sie das $route-Objekt beobachten oder den komponenteninternen Schutz beforeRouteUpdate verwenden.

Global before Guard

Sie können router.beforeEach verwenden, um einen globalen Before Guard zu registrieren:

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

Wenn eine Navigation ausgelöst wird, wird der globale Before Guard in der Reihenfolge der Erstellung aufgerufen. Guards werden asynchron analysiert und ausgeführt. Zu diesem Zeitpunkt wartet die Navigation, bis alle Guards aufgelöst sind.

Jede Schutzmethode erhält drei Parameter:

• zu: Route: das Zielroutenobjekt, das gerade betreten wird

• von: Route: die Route, die die aktuelle Navigation verlassen wird

• nächster: Funktion: bestimmte Diese Methode muss aufgerufen werden, um diesen Hook aufzulösen. Der Ausführungseffekt hängt von den Aufrufparametern der nächsten Methode ab.

  • next(): Fahren Sie mit dem nächsten Hook in der Pipeline fort. Wenn alle Hooks ausgeführt werden, wird der Navigationsstatus bestätigt.

  • next(false): Aktuelle Navigation unterbrechen. Wenn sich die URL des Browsers ändert (vielleicht manuell durch den Benutzer oder über die Zurück-Schaltfläche des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Von-Route entspricht.

  • next('/') oder next({ path: '/' }): Zu einer anderen Adresse springen. Die aktuelle Navigation wird unterbrochen und eine neue Navigation gestartet. Sie können ein beliebiges Standortobjekt an next übergeben und Optionen wie „replace: true“, „name: ‚home‘“ und alle Optionen, die in „router-link“ an „prop“ oder „router.push“ verwendet werden, dürfen festgelegt werden.

  • next(error): (2.4.0+) Wenn der an next übergebene Parameter eine Fehlerinstanz ist, wird die Navigation beendet und der Fehler an den von router.onError() registrierten Rückruf übergeben.

Stellen Sie sicher, dass die nächste Funktion in jedem Navigationsschutz genau einmal aufgerufen wird. Er kann mehr als einmal vorkommen, aber nur, wenn sich nicht alle logischen Pfade überschneiden, sonst wird der Hook nie geparst oder es wird ein Fehler gemeldet. Hier ist ein Beispiel für die Umleitung zu /login, wenn die Authentifizierung des Benutzers fehlschlägt:

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})
// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

Global Resolution Guard

Neu in 2.5.0

In 2.5.0+ können Sie einen mit router.beforeResolve Global Guard registrieren. Dies ähnelt router.beforeEach, mit der Ausnahme, dass der Parsing-Guard aufgerufen wird, bevor die Navigation bestätigt wird und nachdem alle komponenteninternen Guards und asynchronen Routenkomponenten analysiert wurden.

Für das Routing exklusive Guards

Sie können Guards direkt vor der Eingabe in die Routing-Konfiguration definieren:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

Die Methodenparameter dieser Guards sind die gleichen wie die der globalen Frontguards.

Guards innerhalb von Komponenten

Schließlich können Sie die folgenden Routennavigations-Guards direkt in der Routing-Komponente definieren:

• beforeRouteEnter

• beforeRouteUpdate (neu in. 2.2)

• beforeRoute Gehen

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

Der beforeRouteEnter-Guard kann darauf nicht zugreifen, da der Guard aufgerufen wird, bevor die Navigation bestätigt wurde, sodass die neue Komponente, die bald angezeigt wird, noch nicht erstellt wurde.

Sie können jedoch auf die Komponenteninstanz zugreifen, indem Sie einen Rückruf an next übergeben. Führen Sie den Rückruf aus, wenn die Navigation bestätigt wird, und übergeben Sie die Komponenteninstanz als Parameter der Rückrufmethode.

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

Beachten Sie, dass beforeRouteEnter der einzige Wächter ist, der die Weiterleitung von Rückrufen an next unterstützt. Für beforeRouteUpdate und beforeRouteLeave ist dies bereits verfügbar, sodass die Übergabe von Rückrufen nicht unterstützt wird, da dies nicht erforderlich ist.

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

Dieser Abwesenheitsschutz wird normalerweise verwendet, um zu verhindern, dass Benutzer plötzlich gehen, bevor sie Änderungen speichern. Diese Navigation kann mit next(false) abgebrochen werden.

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

Navigationsanalysevorgang abschließen

• Navigation wird ausgelöst.

• Rufen Sie den beforeRouteLeave-Guard in der deaktivierten Komponente auf.

• Rufen Sie vor jeder Wache die globale Wache an.

• Call beforeRouteUpdate Guard (2.2+) in wiederverwendeten Komponenten.

• Vorher anrufenIn der Routing-Konfiguration eingeben.

• Asynchrone Routing-Komponenten auflösen.

• Call beforeRouteEnter in der aktivierten Komponente.

• Rufen Sie den globalen Schutz vor Resolve auf (2.5+).

• Navigation bestätigt.

• Rufen Sie den globalen AfterEach-Hook auf.

• DOM-Update auslösen.

• Rufen Sie die Rückruffunktion auf, die im beforeRouteEnter-Schutz an next übergeben wird, und die erstellte Komponenteninstanz wird als Parameter der Rückruffunktion übergeben.

【Verwandte Empfehlung: „vue.js Tutorial“】

Das obige ist der detaillierte Inhalt vonWas sind die Navigationswächter von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!