Verlaufsmodus des Vue-Projekts

Dieses Mal werde ich Ihnen den Verlaufsmodus des Vue-Projekts vorstellen. Was sind die Vorsichtsmaßnahmen beim Betrieb des Verlaufsmodus des Vue-Projekts? sehen.

Aber es ist nicht schwer zu erkennen, dass das Aussehen von # wirklich hässlich ist und ich nicht weiß, was es bewirkt?

Also habe ich nach Stack Overflow gesucht, und tatsächlich ~ Es scheint, dass Stack Overflow wirklich mächtig ist. Die Probleme, auf die Sie im Projekt stoßen, wurden tatsächlich so gestellt und gelöst Dies ist die Antwort mit den meisten Stimmen, nämlich den Modus in vue2 auf „Verlauf“ zu setzen. Nachdem ich es ausprobiert habe, funktioniert es wirklich!

Da wir jedoch wussten, dass dies das Problem lösen würde, aber nicht wussten, warum, funktionierte es nicht. Mit der Verbindung haben wir die Dokumentation gesehen.

Daher erweitert dieser Artikel das Verständnis des Dokuments. Sie können direkt zum Dokument gehen. 

Bei von Vue entwickelten Einzelseitenanwendungen können wir beim Wechseln zwischen verschiedenen Seiten feststellen, dass es immer nur einen HTML-Code gibt. Dies ist eigentlich der Grund, warum es als Einzelseite und Vue-Router bezeichnet wird Standard-Hash-Modus – verwendet den Hash der URL, um eine vollständige URL zu simulieren, also wenn die URL Die Seite wird bei Änderungen nicht neu geladen. Denn bei einer normalen Seite führt die Änderung der URL definitiv zu einer Änderung der Seite. Erst wenn der Abfrage-

-String

und der Hash-Wert in der URL ersetzt werden, wird die Seite nicht neu geladen. Das hier ist die Wahrheit. Aber #diese Form ist wirklich hässlich! Wenn Sie das also nicht möchten, können Sie den Routing-History-Modus verwenden! ! ! Dieser Modus nutzt die API „history.pushState“ vollständig aus, um URL-Sprünge durchzuführen, ohne die Seite neu zu laden.

Nach Verwendung dieses Modus gibt es kein #, Sie können jedoch wie eine normale URL darauf zugreifen.   

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

Um in diesem Modus jedoch gut spielen zu können, benötigen Sie Unterstützung bei der Hintergrundkonfiguration. Da es sich bei unserer Anwendung um eine Single-Page-Client-Anwendung handelt, wird 404 zurückgegeben, wenn der Hintergrund nicht korrekt konfiguriert ist und der Benutzer im Browser direkt auf http://oursite.com/user/id zugreift .

Daher müssen Sie auf der Serverseite eine Kandidatenressource hinzufügen, die alle Situationen abdeckt: Wenn die URL mit keiner

statischen

-Ressource übereinstimmt, sollte sie dieselbe index.html-Seite zurückgeben, also die Seite Ihrer App hängt davon ab. Hinweis: Das Backend des Projekts, an dem ich gerade arbeite, unterstützt diese Methode nicht, daher werde ich zuerst die #-Methode für die Entwicklung verwenden.

Achtung

Ein Wort der Warnung, denn danach wird Ihr Server keine 404-Fehlerseite mehr zurückgeben, da die Datei index.html für alle Pfade zurückgegeben wird. Um dies zu vermeiden, sollten Sie alle Routing-Situationen in Ihrer Vue-Anwendung abdecken und anschließend eine 404-Seite präsentieren.

Oder wenn Sie

const router = new VueRouter({
 mode: 'history',
 routes: [
 { path: '*', component: NotFoundComponent }
 ]
})

Node.js

als Backend verwenden, können Sie serverseitiges Routing verwenden, um die URL abzugleichen, und 404 zurückgeben, wenn keine Route übereinstimmt, und so einen Fallback implementieren. 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:

Das obige ist der detaillierte Inhalt vonVerlaufsmodus des Vue-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!