Einführung in Routenschutzfunktionen in der Vue-Dokumentation

Vue ist ein beliebtes Front-End-Framework, das viele leistungsstarke Funktionen bietet, darunter die Route Guard-Funktion. Die Route Guard-Funktion ist ein wichtiges Merkmal des Vue-Routings und wird verwendet, um Steuerlogik beim Navigieren zu oder Verlassen einer Route auszuführen. Mit den Routenschutzfunktionen können Sie das Lesen und Ändern von Routen sowie die Routennavigation basierend auf verschiedenen Bedingungen steuern. In diesem Artikel wird die Route Guard-Funktion im Vue-Dokument vorgestellt, um Ihnen zu helfen, die Rolle und Verwendung der Route Guard-Funktion in Vue zu verstehen.

Routenwächterfunktionen können in drei Kategorien unterteilt werden: globale Frontwächter, globale Pfostenhaken und routenexklusive Wächter. Im Folgenden stellen wir diese drei Arten von Schutzvorrichtungen vor.

Globaler Pre-Guard:

Globaler Pre-Guard kann vor jedem Routensprung ausgeführt werden. Sie können einen globalen Präfixschutz für das Vue-Routerobjekt registrieren, sodass dieser auf jeder Route im gesamten Projekt wirksam wird. Registrieren Sie einen globalen beforeEach-Schutz für das Vue-Router-Objekt mithilfe der beforeEach-Methode, wie unten gezeigt:

router.beforeEach((to, from, next) => {
  // to: 即将进入的目标路由对象
  // from: 当前导航正要离开的路由对象
  // next: 下一步执行钩子函数，如果全部执行完了，则返回空或一个true值
})

Die einfachste Verwendung besteht darin, einen ausgehenden Vorgang durch Aufrufen der next()-Methode zu initiieren. Wenn Sie die Navigation abbrechen möchten (z. B. weil der Benutzer keine Zugriffsberechtigung hat), geben Sie false oder einen String oder eine Fehlerinstanz zurück, wodurch die Navigation beendet wird und direkt zur entsprechenden Route gewechselt wird. Beispielsweise beendet der folgende Guard die Navigation, wenn der Benutzer nicht angemeldet ist:

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isAuth
  if (!isAuthenticated && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

Global Posthook:

Global Posthook wird ausgeführt, nachdem die Navigation bestätigt wurde. Dieser Guard akzeptiert keine nächste Funktion und ändert nicht die Navigation selbst:

router.afterEach((to, from) => {
  // to: 要进入的目标路由
  // from: 正在离开的路由
})

Route-exklusive Guards:

Route-exklusive Guards können in der Routenkonfiguration festgelegt werden, was bedeutet, dass Sie verschiedene Präfixe und Postfixe definieren können, die die Guards verarbeiten sollen verschiedene Routen. Mit dem beforeEnter-Guard können Sie eine exklusive Guard-Funktion für eine bestimmte Route konfigurieren (im Gegensatz zum globalen Guard ist es nicht erforderlich, den Guard im Router-Objekt zu registrieren). Der beforeEnter-Guard wird nur ausgelöst, wenn er in der Routen-exklusiven Konfiguration vorhanden ist.

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

Die in einem Route Exclusive Guard ausgeführte Logik ist der Logik in der globalen Front Guard-Funktion sehr ähnlich, aber der Front Guard ermöglicht es Ihnen, die gleiche Logik für alle Routen auszuführen, während der Route Exclusive Guard spezifische Logik definieren kann.

Zusammenfassung:

Die Route Guard-Funktion ist ein wichtiger Bestandteil des Vue-Routings, das Ihnen die Möglichkeit bietet, die Routennavigation zu steuern. Globale Frontschutzvorrichtungen, globale Pfostenhaken und Routen-exklusive Schutzvorrichtungen sind drei verschiedene Schutzvorrichtungstypen mit jeweils unterschiedlichen Zwecken und Eigenschaften. Bei der Verwendung von Vue-Routing kann Ihnen ein tieferes Verständnis und die Verwendung dieser verschiedenen Arten von Schutzvorrichtungen dabei helfen, eine bessere Kontrolle über die Routennavigation zu erlangen und flexiblere Front-End-Anwendungen zu entwickeln.

Das obige ist der detaillierte Inhalt vonEinführung in Routenschutzfunktionen in der Vue-Dokumentation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!