Was sind die Navigations-Hooks von Vue?

Vue verfügt über drei Arten von Navigations-Hooks: 1. Globaler Guard-Hook, der sich auf die Hook-Funktion bezieht, die direkt auf das Routing-Beispiel angewendet wird. Das Merkmal besteht darin, dass alle Routing-Konfigurationskomponenten ausgelöst werden. 2. Route Exclusive Guard Hook bezieht sich auf eine Hook-Funktion, die auch beim Konfigurieren einer einzelnen Route festgelegt werden kann und nur unter dieser Route funktionieren kann. 3. Der lokale Guard-Hook bezieht sich auf die innerhalb der Komponente ausgeführte Hook-Funktion, ähnlich der Lebenszyklusfunktion im Array, die der Lebenszyklus-Hook-Funktion entspricht, die für die mit Routing konfigurierte Komponente hinzugefügt wurde.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Die Rolle des Navigations-Hooks

• Der von Vue-Router bereitgestellte Navigations-Hook wird hauptsächlich dazu verwendet, die Navigation abzufangen und den Sprung abzuschließen oder abzubrechen.
? zu Routing-Beispiel-Hooks, die direkt auf die Funktion angewendet werden Das Merkmal besteht darin, dass alle Routing-Konfigurationskomponenten ausgelöst werden. Vereinfacht ausgedrückt löst das Auslösen des Routings diese Hook-Funktionen aus. Die Ausführungssequenz der Hook-Funktion umfasst beforeEach, beforeResolve und afterEach.

<strong>[beforeEach]<span style="font-size: 18px;"></span></strong>: Wird ausgelöst, bevor die Route gesprungen ist. Die Parameter umfassen „to“, „from“ und „next“. Bitte benachrichtigen Sie uns im Voraus, damit es nicht zu spät ist.

 router.beforeEach  router.beforeResolve  router.afterEach
    const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });

to: Stellt das einzugebende Ziel dar, es ist ein Routing-Objekt

• from: Stellt die aktuell ausgehende Route dar, ebenfalls ein Routing-Objekt
• next: Dies ist eine Methode, die aufgerufen werden muss, und die spezifische Der Ausführungseffekt hängt von den von der nächsten Methode aufgerufenen Parametern ab

<h3>[beforeResolve]<a id="3_6"></a> </h3>: Dieser Hook ähnelt beforeEach, er wird auch vor der Route ausgelöst Sprünge, und der Parameter ist auch Die offizielle Erklärung des Unterschieds zwischen , from, next und beforeEach lautet: Der Unterschied besteht darin, dass die Navigation vor der Bestätigung bestätigt wird und die Guards und asynchronen Routing-Komponenten in allen Komponenten analysiert werden , wird der Parsing-Guard aufgerufen.

Das heißt, es wird nach beforeEach und beforeRouteEnter in der Komponente, nach afterEach und vor afterEach aufgerufen.

<code><strong>[beforeEach]</strong>：在路由跳转前触发，参数包括to,from,next三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。

 const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });
  //全局后置钩子，后置钩子并没有 next 函数，也不会改变导航本身
    router.afterEach((to, from) => {
        // do someting
    });

• to：代表要进入的目标，它是一个路由对象
• from：代表当前正要离开的路由，同样也是一个路由对象
• next：这是一个必须需要调用的方法，而具体的执行效果则依赖next方法调用的参数

<strong>[beforeResolve]</strong>：这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为：

 区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就会被调用。

即在beforeEach和组件内beforeRouteEnter之后，afterEach之后，afterEach之前调用。

<strong>[afterEach]</strong>：和beforeEach相反，它是在路由跳转完成之后触发，参数包括to、from，没有了next，它发生在beforeEach和beforeResolve之后，beforeRouteEnter(足迹按内守卫)之前。

  cont router = new VueRouter({
        routes: [
            {
                path: '/file',
                component: File,
                beforeEnter: (to, from ,next) => {
                    // do someting
                }
            }
        ]
    });

2、路由独享守卫

是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。其位置如下，也就是像File这样的组件都存在这样的钩子函数。目前它只有一个钩子函数beforeEnter。

[beforeEnter][afterEach]: Im Gegensatz zu beforeEach wird es ausgelöst, nachdem der Routensprung abgeschlossen ist Nach beforeEach und beforeResolve, vor beforeRouteEnter (Footprint innerhalb des Guards).

 const File = {
        template: `<div>This is file</div>`,
        beforeRouteEnter(to, from, next) {
            // do someting
            // 在渲染该组件的对应路由被 confirm 前调用
        },
        beforeRouteUpdate(to, from, next) {
            // do someting
            // 在当前路由改变，但是依然渲染该组件是调用
        },
        beforeRouteLeave(to, from ,next) {
            // do someting
            // 导航离开该组件的对应路由时被调用
        }
    }

2. Route Exclusive Guard bezieht sich auf eine Hook-Funktion, die auch beim Konfigurieren einer einzelnen Route festgelegt werden kann und nur unter dieser Route funktionieren kann. Sein Speicherort ist wie folgt, dh Komponenten wie File verfügen über solche Hook-Funktionen. Derzeit gibt es vor Enter nur eine Hook-Funktion.

[beforeEnter]

: Es ist genau das gleiche wie beforeEach. Wenn beide festgelegt sind, wird es unmittelbar nach beforeEach ausgeführt. von und weiter.

routes:[
      {
          path:'/b',
          component:B,
          beforeEnter:(to,form,next)=>{
             ..... 
          }
      }
  ]

3. Lokaler Schutz

bezieht sich auf die innerhalb der Komponente ausgeführte Hook-Funktion, ähnlich der Lebenszyklus-Funktion im Array, die der hinzugefügten Lebenszyklus-Hook-Funktion für die mit Routing konfigurierte Komponente entspricht. Die Hook-Funktionen umfassen beforeRouteEnter, beforeRouteUpdate (neu in 2.2) und beforeRouteLeave in der Reihenfolge der Ausführung. Der Ausführungsort ist wie folgt:

rrreee

Route Jump Navigation Parsing-Prozess, wenn Route A -> B Route

1. Rufen Sie den Urlaubswächter in Komponente A an. beforeRouterLeave

2 in Komponente A ruft den globalen beforeEach-Schutz auf. router.beforeEach

3. Führen Sie dann beforeEnter in der Route B-Konfiguration aus.

rrreee

4. Führen Sie dann den Eingangsschutz von Komponente B aus. BeforeRouterEnter5 in Komponente B ruft den globalen beforeResolve-Schutz auf (2.5+). router.beforeResolve6. Navigation ist bestätigt.

🎜7. Rufen Sie den globalen AfterEach-Hook auf. router.afterEach🎜🎜8. DOM-Update auslösen. 🎜🎜【Verwandte Empfehlungen: 🎜vuejs-Video-Tutorial🎜, 🎜Web-Front-End-Entwicklung🎜】🎜

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