Ich verwende derzeit die WordPress-REST-API und den vue-router, um zwischen Seiten auf einer kleinen einzelnen Seite umzuschalten. Wenn ich einen AJAX-Aufruf mit der REST-API an den Server mache, werden die Daten jedoch geladen, jedoch erst, nachdem die Seite bereits gerendert wurde.
Die Vue-Router-Dokumentation bietet einen Einblick in das Laden von Daten davor und danach Navigieren zu jeder Route, aber ich würde gerne wissen, wie man alle Routen- und Seitendaten bei der anfänglichen Seitenladung lädt, wobei jedes Mal, wenn eine Route aktiviert wird, Daten geladen werden müssen.
Beachten Sie, dass ich meine Daten in die acf -Eigenschaft lade und dann darauf innerhalb einer .vue -Dateikomponente mit this.$parent.acfs zugreife.
main.js Router-Code:
%Vor%Home.vue-Komponentencode:
%Vor%Irgendwelche Ideen?
Okay, ich habe das endlich herausgefunden. Alles was ich mache, ist eine synchrone Ajax-Anfrage innerhalb meiner main.js -Datei aufzurufen, wo meine Root-Vue-Instanz instanziiert wird, und eine Dateneigenschaft den angeforderten Daten wie folgt zuzuordnen:
main.js
%Vor% Von hier aus kann ich die gezogenen Daten innerhalb jeder einzelnen .vue Datei / Komponente wie folgt verwenden:
Schließlich rendere ich die Daten innerhalb der gleichen .vue Vorlage mit den folgenden:
Die wichtigste Information, die mitgenommen werden muss, ist, dass alle ACF-Daten nur EINMALIG am Anfang aufgerufen werden, verglichen mit jedem Besuch einer Route mit etwas wie beforeRouteEnter (to, from, next) . Als Ergebnis kann ich seidenweiche Seitenübergänge wie gewünscht erhalten.
Hoffe, das hilft jedem, der auf das gleiche Problem stößt.
Sie können Navigationswächter verwenden.
Bei einer bestimmten Komponente würde es so aussehen:
%Vor%Sie können allen Komponenten auch einen Navigationsschutz hinzufügen:
%Vor% Es ist zu beachten, dass die Navigationshilfen asynchron sind. Daher müssen Sie den next() -Rückruf aufrufen, wenn das Laden der Daten abgeschlossen ist. Ein echtes Beispiel aus meiner App (wo sich die Guard-Funktion in einer separaten Datei befindet):
In Ihrem Fall müssten Sie natürlich next() im success Callback aufrufen.
Tags und Links javascript jquery ajax vue.js wordpress