Vue+beforeEnter verwendet die Hook-Funktion

Dieses Mal werde ich Ihnen die Hook-Funktion von Vue+beforeEnter vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung der Hook-Funktion von Vue+beforeEnter?

Warum müssen Sie Ihre eigene beforeEnter-Hook-Funktion erstellen?

Sehen Sie sich das Problemszenario an: In jeder Zelle wird angezeigt, ob das Wort gemeistert wurde. Klicken Sie auf die Zelle, um die Detailseite aufzurufen Sie können das Wort lernen und markieren, ob das Wort beherrscht wird. Sie können auch andere Wörter lernen, indem Sie auf der Detailseite auf die Schaltflächen „Vorwärts“ und „Zurück“ klicken. Wenn ich also auf „Zurück“ klicke, sollte in der Wortliste der aktuelle Status aller Wortbenutzer angezeigt werden.

Die letzte Seitenbeziehung ist wie folgt:

wordListPage ——> wordDetail (eine Reihe von Wörtern lernen, beenden) ——> )

Für das obige Szenario ist es nicht möglich, die Vue-Funktion Lebenszyklus zu verwenden, da Vues Lebenszyklusfunktionen wie „beforeCreate“, „created“, „beforeMounted“, „mounted“ usw. vorhanden sind Wird nur verwendet, wenn die Komponente (VM-Instanz) initialisiert wird (z. B. $route.go(-1), Keep-Alive). Die Lebenszyklusfunktion wird nicht mehr aufgerufen . Wenn ich daher von der Wortdetailseite zur Listenseite zurückkehre, kann ich keinen geeigneten Zeitraum finden, um mit der Datenaktualisierung zu beginnen. Daher kann das obige Szenario nicht gut gehandhabt werden.

Natürlich sind die oben genannten Szenarien relativ selten, aber die Existenz der beforeEnter-Hook-Funktion ist dennoch erforderlich.

Konstruieren Sie die beforeEnter-Hook-Funktion

Abhängigkeitswissenspunkte:

1. Routing: vue-router

2. mixin: mixin 1. Erstellen Sie einen zentralen Event-Bus

3. Für den zentralen Event-Bus besteht ein einfaches Verständnis darin, eine öffentliche Vue-Instanz (EventBus) zu erstellen. und verwenden Sie dieselbe Instanz an verschiedenen Orten, um die EventBus.$emit('demo' )-Nachricht auszulösen. Verwenden Sie eine öffentliche Vue-Instanz, um EventBus.$on('demo',() => {}) dort abzuhören, wo Sie abhören möchten zur Veranstaltung. Um es ganz klar auszudrücken: Es gibt eine solche öffentliche Komponente, die Nachrichten an verschiedene Orte sendet und an verschiedenen Orten auf Nachrichten wartet. Das Senden und Empfangen von Nachrichten wird also von selbst implementiert, daher nennen wir es den zentralen Ereignisbus.

   Der Code lautet wie folgt: libs/EventBus.js

   import Vue from 'vue';
   const EventBus = new Vue();
   export default EventBus;

   Sehen wir uns an, wie man ihn verwendet

2. Routing-Hook-Funktion beforeEach

Durch die beforeEach-Hook-Funktion wird beim Routenwechsel das beforeEnter-Ereignis der entsprechenden Komponente ausgelöst.

Der Code lautet wie folgt: router/index.js

import EventBus from '@/libs/EventBus';
router.beforeEach((to, from, next) => {
  //如：EventBus.$emit('homeBeforeEnter');
  EventBus.$emit(to.name + 'BeforeEnter'); 
  if (to.matched.some(route => route.meta.isAuth)) {
    ...
    next()
  } else {
    next()
  }
})

3. Erstellen Sie ein globales Mix-In-Objekt

Hier die Überwachung von Routenwechselereignisse und Komponenteninstanz-Hooks werden implementiert. Auslösen der Funktion beforeEnter.

libs/beforeEnterMixin.js

import EventBus from './EventBus';
export default {
  beforeCreate() {
    //获取当前路由名称，与前面使用to.name对应
    let vmName = this.$route.name;
    if (!vmName) {
      return;
    }
    // 当组件初始化时，先触发一次，后续将不再调用
    this.$options.beforeEnter();
    const beforeEnter = vmName + 'BeforeEnter';
    //监听路由切换时触发的...BeforeEnter事件
    //通过this.$options获取到实例中的beforeEnter钩子函数
    //监听到...BeforeEnter事件后，触发钩子函数beforeEnter调用
    EventBus.$on(beforeEnter, this.$options.beforeEnter);
  },
  //该函数在这里只作为占位，没有实际意义
  beforeEnter() {}
};

Für dieses Mixin-Objekt ist es möglich, globales oder lokales Mixin zu verwenden.

Globaler Mix-in: main.js

import beforeEnterMixin from '@/libs/beforeEnterMixin';
Vue.mixin(beforeEnterMixin);

4. Verwendung in Komponenten

wie: home.vue

<template>
  <p>
    首页
  </p>
</template>
<script>
export default {
  beforeEnter() {
    console.log('首页 beforeEnter...');
  },
  created() {
    console.log('首页 created...')
  }
}
</script>

An diesem Punkt ist unser beforeEnter fertig. Sie können eine Demo erstellen, um es selbst zu testen. Derzeit verwende ich es in vielen Projekten.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung, wie man Tabs und Switch-Funktionen in Vue implementiert

Detaillierte Erklärung der Verwendung von $refs in vue

Das obige ist der detaillierte Inhalt vonVue+beforeEnter verwendet die Hook-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!