So lösen Sie das Problem, dass die Seite im Vue-Routing-Verlaufsmodus nicht gerendert werden kann

In diesem Artikel werden hauptsächlich die Gründe und Lösungen für das Rendern der Seite im Verlaufsmodus des Vue-Routings vorgestellt. Er ist von großem praktischem Wert >Ursachen, die durch den Verlaufsmodus des Routings unter Vue verursacht werden. Gründe, warum die Seite nicht gerendert werden kann

Es ist sehr einfach, eine Single-Page-Anwendung mit Vue.js + Vue-Router zu erstellen. Mit Vue.js können wir bereits Anwendungen durch Kombinieren von Komponenten erstellen. Wenn Sie Vue-Router hinzufügen möchten, müssen wir die Komponenten Routen zuordnen und Vue-Router dann mitteilen, wo sie gerendert werden sollen.

Die URL einer allgemein entwickelten Einzelseitenanwendung weist ein Hash-Muster mit einem #-Zeichen auf, da die gesamte Anwendung selbst nur über einen HTML-Code verfügt und der Rest über den Router gerendert wird. Wenn es aus geschäftlichen Gründen erforderlich ist oder Sie einfach das Gefühl haben, dass das #-Zeichen nicht schön ist, können Sie den Verlaufsmodus verwenden. Fügen Sie einfach die folgende Codezeile zur Konfigurationsdatei So lösen Sie das Problem, dass die Seite im Vue-Routing-Verlaufsmodus nicht gerendert werden kann hinzu:

history: mode

Ja, so wird es in der URL kein #-Zeichen mehr geben, und Sie werden feststellen, dass die gesamte Adressleiste wieder dem entspricht, was Sie kennen. Die nächste Einführung ist jedoch möglicherweise sehr wichtig Zwei Fallstricke wie diese. …

Die Seite kann nicht gerendert werden

Als ich den Verlaufsmodus aktiviert habe, habe ich dies nicht getan Führen Sie die Verarbeitung des Routings durch. In der Entwicklungsphase ist alles normal, aber greifen Sie nach dem Packen auf den Projektpfad zu:

sdp.driver.com/driver/

und Sie werden feststellen, dass die Die Seite ist leer, aber die statischen Dateien können normal referenziert werden, da das Modul in YII verwendet wird und daher zusätzlich zum Domänennamen auch den Namen des Treibermoduls enthält. Im Allgemeinen werden die von vielen Leuten erstellten Projekte im Stammverzeichnis abgelegt, also in einer Form wie:

sdp.driver.com

, kein Problem. Wenn das Modul jedoch konfiguriert oder in einem Unterordner abgelegt ist, treten Probleme auf. Dies liegt tatsächlich daran, dass der Router die Komponenten im Pfad nicht finden kann und daher nicht gerendert werden kann. Ändern Sie einfach die So lösen Sie das Problem, dass die Seite im Vue-Routing-Verlaufsmodus nicht gerendert werden kann im Router und fügen Sie Ihren Projektnamen zu jedem Pfad hinzu, und Sie werden erfolgreich sein.

Der letzte Seiteneffekt:

404-Fehler

in Wenn Sie im Verlaufsmodus direkt über die Adressleiste auf den Pfad zugreifen, tritt ein 404-Fehler auf. Dies liegt daran, dass es sich um eine einseitige Anwendung handelt (Unsinn) ... Tatsächlich liegt dies daran, dass die API „history.pushState“ aufgerufen wird Daher werden alle Vorgänge wie Sprünge über den Router implementiert. Die Lösung dieses Problems ist sehr einfach. Sie müssen nur im Hintergrund konfigurieren, dass zur Standard-Index.html gesprungen wird . Die spezifische Konfiguration ist wie folgt:

Apache

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
 try_files $uri $uri/ /index.html;}

Node.js (Express)

Ungefähr jedes Mal Das Problem, die Seite zu aktualisieren, wenn Sie auf einen Link klicken

Wie wir alle wissen, werden Single-Page-Anwendungen aufgrund des reibungslosen Erlebnisses entwickelt, wenn die Seite bei jedem Klick aktualisiert wird ...

Der Grund dafür ist, dass window.location zum Springen verwendet wird. Sie müssen nur die vom Router bereitgestellte Methode verwenden, um dieses Problem zu lösen:

Binden Sie die Router zur globalen Konfiguration in main.js

Vue.prototype.router = router;

Die folgenden Methoden werden zur Steuerung von Sprüngen verwendet

this.router.push('driver/service');

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So interagieren und überprüfen Sie VueJS-Komponenten über Requisiten

So lösen Sie das Problem von VueJS in Die übergeordnete Komponente Die Unterkomponente „Methodenaktualisierungsstatus“ kann nicht rechtzeitig aktualisiert und gerendert werden

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die Seite im Vue-Routing-Verlaufsmodus nicht gerendert werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!