Was sind die Hooks und Anwendungen von Vue-Router in JavaScript?

Der Inhalt dieses Artikels befasst sich mit den Hooks und Anwendungen, die der Vue-Router in JavaScript hat. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Welche Hooks hat der Vue-Router? Nutzungsszenario?

Die Implementierung des Routers kann hier angeklickt werden

Wir haben bereits im Klartext darüber gesprochen, was ein Hook ist, und wir werden es hier wiederholen, das heißt, vor was und nach was, Es heißt Hooks auf Englisch, Lebenszyklus in professioneller Sprache und Guards in prätentiöserer Sprache ...

Das Konzept der Hooks existiert auch im Vue-Router, der in unterteilt ist drei Schritte der Erinnerung

• Global Guard

• Route Exclusive Guard

• Component Exclusive Guard

Globaler Wächter

Es ist leicht zu verstehen, dass der globale Wächter die globalen Router-Aktionen überwachen kann

• router.beforeEach wird ausgelöst, wenn die Route wird weitergeleitet

const router = new VueRouter({ ... })
// to 要进入的目标路由对象
// from 当前的路由对象
// next resolve 这个钩子，next执行效果由next方法的参数决定
// next() 进入管道中的下一个钩子
// next(false) 中断当前导航
// next({path}) 当前导航会中断，跳转到指定path
// next(error) 中断导航且错误传递给router.onErr回调
// 确保前置守卫要调用next，否然钩子不会进入下一个管道
router.beforeEach((to, from, next) => {
  // ...
})

• router.afterEach wird ausgelöst, wenn die Route postfixiert wird

// 与前置守卫基本相同，不同是没有next参数
router.afterEach((to, from) => {
  // ...
})

• router.beforeResolve

Ähnlich wie router.beforeEach wird es nach dem Parsen von Guards und asynchronen Routing-Komponenten in allen Komponenten ausgelöst

Route Exclusive Guard

Die Parameter und Bedeutungen sind die gleichen wie beim globalen Schutz, aber die definierte Position ist unterschiedlich

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

Komponenten-exklusiver Schutz

Ein neuer Schutz in der Komponente, beforeRouteUpdate, wird ausgelöst, wenn die Komponente kann wiederverwendet werden, z. B. /demo/:id, springe zu /demo/ in /demo/1 2, /demo kann wiederverwendet werden und dann wird beforeRouteUpdate

const Demo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    ...
  },
  // 在当前路由改变，但是该组件被复用时调用
  beforeRouteUpdate (to, from, next) {
    ...
  },
  beforeRouteLeave (to, from, next) {
    ...
  }
}

• ausgelöst. Beachten Sie, dass Sie diesen Wert der aktuellen Komponente nicht vor beforeRouteEnter abrufen können, da die Komponente noch erstellt wurde. Mit next(vm => {console.log(vm)}) können Sie diesen Wert der aktuellen Komponente zurückgeben, um einige logische Operationen auszuführen

Nutzungsszenarien

Der letzte Schritt vor der Routeneingabe. Typischerweise können Sie eine Berechtigungskontrolle durchführen, einige Informationen, Aufgaben usw. löschen oder speichern, wenn die Route verlässt.

Zusammenfassung

Die Hooks im Vue-Router sind in drei Typen unterteilt: global, lokal und komponentenweise. Sie haben alle einen vorderen Schutz und einen hinteren Schutz Holen Sie sich dies von der aktuellen Komponente, da die Komponente noch nicht erstellt wurde. Dies kann über den nächsten Parameter zurückgegeben werden, andernfalls gelangt sie nicht in die nächste Röhre

Das obige ist der detaillierte Inhalt vonWas sind die Hooks und Anwendungen von Vue-Router in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!