So lösen Sie das Problem, dass die gerenderte Seite nicht angezeigt wird, wenn das Vue-Routing im Verlaufsmodus aktualisiert wird

Dieses Mal zeige ich Ihnen eine Methode zum Umgang mit der Vue-Routing-Seite ohne Reflexion beim Aktualisieren im Verlaufsmodus. Wie Sie mit der Vue-Routen-Rendering-Seite ohne Reflexion beim Aktualisieren umgehen VerlaufsmodusNotizenWas sind die folgenden? Lösen Sie das Problem, dass das verschachtelte Routing (Sub-Routing) des Vue-Routers die Seite beim Aktualisieren im Verlaufsmodus nicht rendern kann. Der spezifische Inhalt ist wie folgt

1. Ausnahmebeschreibung

Ursprünglich wurde der Hash-Modus von Vue-Router verwendet, aber die URL im Hash-Modus muss das „#“-Symbol haben, was nicht nur unangenehm aussieht, sondern in einigen Szenarien (der WeChat-Freigabe) auch das „#“ im Routing zerstört Seite wird sich ändern " #"Der folgende Inhalt wird verarbeitet), daher müssen Sie den Verlaufsmodus verwenden und dann das Backend die Nginx-Konfiguration ändern lassen:

vue-router verwendet den Verlaufsmodus + verschachteltes Routing:

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

Beim Zugriff auf die Routing- und verschachtelten Routing-Seiten ist die Anzeige normal, aber beim Aktualisieren der Seite ist die verschachtelte Routing-Seite abnormal:

const router = new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   component: mall,
   name: 'mall'
  },
  ……
  //我的银行卡
  {
   path: '/myCard',
   meta: { requireAuth: true },
   component: myCard,
   name: 'myCard',
   children:[
   { path:'', component: card},
   { path:'add', component: add}
   ]
  }
   ……
 ]
})

Der Seitenstil ist völlig durcheinander. Schauen Sie sich die von der Seitenanforderung geladenen

statischen

an. Alle statischen Dateien sind

2. Ausnahmeanalyse

1. Sehen Sie sich die Beschreibung des verschachtelten Routings im offiziellen Dokument an:

2. Wenn Sie sich die vorherige Ausnahmeseite noch einmal ansehen, scheint es, dass unsere übergeordnete Route zum Stammverzeichnis geworden ist. Überprüfen Sie den Dateipfad:

3. Schauen Sie sich die von uns eingeführten Ausnahmedateien an. Sie werden in der Datei index.html direkt mit

referenziert, dh sie werden unter dem Stammpfad eingeführt. Im vorherigen Hash-Modus ändert sich der Root-Pfad nicht, sodass wir diese statischen Dateien direkt in die Datei index.html einfügen können. Nach Verwendung des Verlaufsmodus ist der Root-Pfad jedoch nicht festgelegt. Dann ist diese Einführungsmethode nicht realisierbar, weshalb die obige Seite nicht gerendert werden kann:

3. Lösen Sie das Problem

Das ist hier etwas peinlich. Ich habe zuerst darüber nachgedacht, statische Stildateien über Import in das Haupt-Vue einzuführen, was tatsächlich machbar war, aber am Ende habe ich festgestellt, dass es in Ordnung ist, den Einführungspfad für statische Dateien in der index.html direkt zu ändern Datei:

Vor der Änderung:

Nach der Änderung

<script src="./static/js/stomp.js"></script>

4. Prinzip

<script src="/static/js/stomp.js"></script>

./ bezieht sich auf das aktuelle Verzeichnis, in dem sich der Benutzer befindet (relativer Pfad); / bezieht sich auf das Stammverzeichnis (absoluter Pfad, Projektstammverzeichnis), das das Projektstammverzeichnis

ist Für den Hash-Modus ist der Root-Pfad festgelegt, d. h. das Root-Verzeichnis des Projekts. Im Verlaufsmodus werden jedoch verschachtelte Pfade, die mit

beginnen, als Root-Pfad betrachtet, wenn Sie also „./“ zur Einführung verwenden Dateien, können Sie sie nicht finden, da sich die Datei selbst im Projektstammverzeichnis und nicht im verschachtelten Pfadverzeichnis befindet.

Zusammenfassung

Unabhängig vom Hash-Modus oder Verlaufsmodus können Sie statische Dateien direkt mit „/“ aus dem Projektstammverzeichnis importieren. /

PS: Ich bin vor einiger Zeit auf dieses Problem gestoßen. Ich habe lange auf Baidu gesucht und festgestellt, dass nur wenige Leute diese Frage gestellt haben und niemand sie beantwortet hat. Ich habe auch viele Front-End-Experten gefragt, konnte dieses Problem jedoch immer noch nicht lösen. Vielleicht liegt es daran, dass ich es gewohnt bin, „./“ zu schreiben. Und bei dem Pfad, der mit „../“ beginnt, habe ich das Problem der Einführung statischer Dateien nicht bemerkt und viele Methoden ausprobiert. Schließlich stellte ich peinlicherweise fest, dass das Problem eigentlich sehr einfach war, es lag nur daran, dass ich hatte kein umfassendes Verständnis des zugrunde liegenden Frameworks!

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 verbinden Sie node.js mit MySQL

Detaillierte Erläuterung der Schritte zur Implementierung des Reaktionsservers Rendering

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