Was ist Vue-Router?

Um Vue-Router zu lernen, müssen Sie zunächst wissen, wie das Routing hier ist. Warum können wir Links nicht wie bisher direkt mit dem Tag schreiben? Wie verwende ich den Vue-Router? Was sind die üblichen Routing-Operationen? Das Warten auf diese Fragen ist die Hauptfrage, die in diesem Artikel behandelt wird.

Was ist Vue-Router?

Das Routing hier ist nicht Bezieht sich auf das, was wir normalerweise als Hardware-Router bezeichnen. Das Routing hier ist der Pfadmanager von SPA (Single Page Application). Allgemeiner ausgedrückt ist Vue-Router das Linkpfad-Verwaltungssystem von WebApp.
vue-router ist das offizielle Routing-Plug-in von Vue.js. Es ist tief in vue.js integriert und eignet sich zum Erstellen von Single-Page-Anwendungen. Die Single-Page-Anwendung von Vue basiert auf Routing und Komponenten. Routing wird zum Festlegen von Zugriffspfaden und zum Zuordnen von Pfaden und Komponenten verwendet. Herkömmliche Seitenanwendungen verwenden einige Hyperlinks, um Seitenwechsel und -sprünge zu implementieren. In der Single-Page-Anwendung von Vue-Router wird zwischen Pfaden gewechselt, dh zwischen Komponenten. Der Kern des Routing-Moduls besteht darin, die Zuordnungsbeziehung zwischen URLs und Seiten herzustellen.
Der Grund, warum wir das a-Tag nicht verwenden können, liegt daran, dass wir Vue für Einzelseitenanwendungen verwenden, was gleichbedeutend damit ist, nur eine Hauptseite index.html zu haben. Sie schreiben also Tags funktionieren nicht, Sie müssen Vue-Router verwenden, um sie zu verwalten.

Vue-Router-Implementierungsprinzip

SPA (Einzelseitenanwendung): Eine Einzelseitenanwendung mit nur einer vollständigen Seite; sie wird nicht geladen, wenn die Seite geladen wird Beim Aktualisieren der gesamten Seite wird nur der Inhalt in einem angegebenen Container aktualisiert. Einer der Kerne einer Single-Page-Anwendung (SPA) ist: Aktualisieren der Ansicht, ohne die Seite erneut anzufordern; vue-router bietet zwei Methoden bei der Implementierung des Single-Page-Front-End-Routings: Hash-Modus und Verlaufsmodus; >1, Hash-Modus:

Vue-Router-Standard-Hash-Modus – verwendet den Hash der URL, um eine vollständige URL zu simulieren, sodass die Seite nicht neu geladen wird, wenn sich die URL ändert. Hash (#) ist der Ankerpunkt der URL, der eine Position auf der Webseite darstellt. Wenn Sie nur den Teil nach # ändern, scrollt der Browser nur zur entsprechenden Position und lädt die Webseite nicht neu , # wird zur Steuerung des Surfens verwendet. Es ist für die Serverseite völlig nutzlos und die HTTP-Anfrage enthält nicht gleichzeitig #. Jedes Mal, wenn der Teil nach # geändert wird, wird ein Datensatz zum Zugriffsverlauf des Browsers hinzugefügt . Verwenden Sie die Schaltfläche „Zurück“, um zur vorherigen Position zurückzukehren. Der Hash-Modus rendert also unterschiedliche Daten an der angegebenen DOM-Position entsprechend unterschiedlicher Werte durch die Änderung des Ankerpunktwerts

2. Verlauf Modus:

Da der Hash-Modus mit # versehen ist, können wir den Verlaufsmodus des Routings verwenden. Wir müssen nur „Modus: ‚Verlauf‘“ hinzufügen. Beim Konfigurieren von Routing-Regeln nutzt dieser Modus die API „history.pushState“, um URL-Sprünge durchzuführen, ohne die Seite neu zu laden.

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