Verwenden Sie die Hook-Funktion beforeEnter (Code im Anhang).

Dieses Mal werde ich Ihnen die Verwendung der beforeEnter-Hook-Funktion (mit Code) und die Vorsichtsmaßnahmen für die Verwendung der beforeEnter-Hook-Funktion vorstellen (das Folgende ist ein praktischer Fall, schauen wir uns das an.

Warum eine eigene beforeEnter-Hook-Funktion erstellen?

Sehen Sie sich das Problemszenario an: Es gibt eine Wortlistenseite im Projekt, und in jeder Zelle wird notiert, ob das Wort vorhanden ist wurde gemeistert. Klicken Sie auf die Zelle, um die Detailseite aufzurufen. Sie können das Wort lernen und markieren, ob es gemeistert ist. Sie können auch andere Wörter lernen, indem Sie auf der Detailseite auf die Schaltflächen „Vorwärts“ und „Zurück“ klicken , die Wortliste sollte den neuesten Status aller vom Benutzer beherrschten Wörter anzeigen:

wordListPage ——> eine Reihe von Wörtern, Beenden) ——> wordListPage (aktualisieren Sie die Wortliste)

Für das obige Szenario ist es nicht möglich, Vue-Lebenszyklusfunktionen zu verwenden, da Vues Lebenszyklusfunktionen wie: beforeCreate, erstellt, beforeMounted, gemountet usw. werden nur aufgerufen, wenn die Komponente initialisiert wird, aber wenn die Komponente (VM-Instanz) aus dem Cache kommt (z. B. $route.go(-1), Keep-Alive), läuft der Lebenszyklus ab Wenn ich daher von der Wortdetailseite zur Listenseite zurückkehre, kann ich keinen geeigneten Zeitraum zum Initiieren der Datenaktualisierung finden, sodass das obige Szenario nicht gut gehandhabt werden kann

Natürlich. Das obige Szenario ist relativ selten, aber die beforeEnter-Hook-Funktion ist immer noch erforderlich, um die beforeEnter-Hook-Funktion

Abhängige Wissenspunkte zu erstellen:

Routing: Vue-Router

1. Mixin: Mixin

2. Zentraler Veranstaltungsbus

3. 1. Erstellen Sie einen zentralen Ereignisbus

Für den zentralen Ereignisbus besteht ein einfaches Verständnis darin, eine öffentliche Vue-Instanz (EventBus) zu erstellen und dieselbe Instanz in zu verwenden Verschiedene Orte zum Auslösen der EventBus.$emit('demo')-Nachricht. Verwenden Sie eine öffentliche Vue-Instanz, um EventBus.$on('demo',() => {}) an der Stelle abzuhören, an der Sie das Ereignis abhören möchten Es ist klarer, dass es eine solche öffentliche Komponente gibt, die Nachrichten sendet und an verschiedenen Orten überwacht. Daher wird sie als zentraler Ereignisbus bezeichnet Code ist wie folgt: libs/EventBus Hook-Funktion, die entsprechende Komponente wird ausgelöst, wenn die Route vor dem Enter-Ereignis umgeschaltet wird.

Der Code lautet wie folgt: router/index.js

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

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 '@/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()
  }
  
})

Für dieses Mixin-Objekt ist es möglich, globales oder lokales Mixin zu verwenden. Globaler Mix-in: main.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() {}
};

4. Verwendung in Komponenten

wie: home.vue

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

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:

So verwenden Sie Vue + Webpack, um asynchrones Laden durchzuführen

Dynamischer Routing-Betriebsunterabschnitt des Vue-Routers Route

Das obige ist der detaillierte Inhalt vonVerwenden Sie die Hook-Funktion beforeEnter (Code im Anhang).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!