Wie Vue-Router Routing-Sprünge und Seitenrendering implementiert

Vue-router ist das offizielle Routing-Management-Tool von Vue.js. Es unterstützt die Erstellung von Single-Page-Anwendungen (SPA) auf Basis von Vue.js. Die bereitgestellte Routing-Funktion ermöglicht es uns, den Seitensprung und die Anzeige durch die Verwaltung des Pfads zu steuern die URL.

Dieser Artikel konzentriert sich auf die zugrunde liegenden Implementierungsprinzipien von Vue-Router und analysiert, wie Vue-Router Routing-Sprünge und Seitenrendering implementiert. 1. Grundlegende Verwendung von Vue-Router Im obigen Code verwenden wir die Methode Vue.use(), um den Vue-Router zu registrieren, eine Routing-Instanz zu erstellen und diese als Option der Vue-Instanz zu verwenden, sodass die Vue-Instanz und jede Komponente der gesamten Anwendung verwendet werden kann Vue-Router.

Gleichzeitig definieren wir in der Routing-Instanz zwei Routing-Objekte, jedes Routing-Objekt besteht aus drei Attributen:

Pfad: Pfad, gibt den URL-Pfad an, der diesem Routing-Objekt entspricht;

1. Name: Der Routenname unterscheidet sich vom Komponentennamen. Der Name dient der Zweckmäßigkeit und kann mit den Methoden $router.push() und $router.replace() aufgerufen werden: Komponente, die der aktuellen Route entspricht.

In der Vue-Komponente können wir die Objekte $router und $route verwenden, um Routing-bezogene Vorgänge auszuführen:

$router: wird verwendet, um zu einer anderen Route zu springen;

$route: wird verwendet, um die aktuellen Routeninformationen abzurufen .

2. Das Implementierungsprinzip von Vue-Router
• Das Grundprinzip von Vue-Router zur Implementierung von Routing-Sprüngen und Seitenrendering:
• Überwachung von URL-Änderungen

Vue-Router überwacht URL-Änderungen abhängig von der URL. um verschiedene Seiten anzuzeigen.

In Bezug auf die Datenbindung kapselt Vue.js intern die Methode Object.defineProperty(), die eine bidirektionale Datenbindung realisiert. Allerdings hat Vue.js keine Möglichkeit, mit URL-Änderungen umzugehen. Daher benötigt der Vue-Router eine neue Möglichkeit, URL-Änderungen zu überwachen.
• Vue-Router verwendet die Routing-API von H5 – History.pushState(state, title, url) und History.replaceState(state, null, url), um URL-Änderungen zu überwachen. Wenn sich die URL ändert, löst der Vue-Router den internen Routing-Änderungsmechanismus aus und verwendet die aktuelle URL, um die Komponente abzuleiten, die gerendert werden muss.

Übereinstimmende Routing-Regeln

Der Vue-Router ermittelt, ob die Route vorwärts oder rückwärts verläuft, indem er die vorherige URL mit der nächsten URL vergleicht, wenn sich die Route ändert, und ruft dann verschiedene Methoden auf, um unterschiedliche Ansichten anzuzeigen.

Innerhalb des Vue-Routers werden Routing-Regeln in Routing-Datensätze analysiert. Jeder Routing-Datensatz enthält einen URL-Pfad und entsprechende Komponenteninformationen. Diese Routing-Datensätze werden in der internen Routing-Tabelle gespeichert.
1. Wenn sich die URL ändert, durchsucht der Vue-Router die Routing-Tabelle nach einem Routing-Datensatz, der mit dem aktuellen URL-Pfad übereinstimmt. Wenn er vorhanden ist, bedeutet dies, dass der URL-Pfad zulässig ist, und analysiert dann die Komponente das muss gerendert werden.

Rendering-Komponente

Wenn eine gültige Routing-Regel erfüllt ist, verwendet der Vue-Router die in der Routing-Regel definierte Komponente, um die Seite zu rendern, die angezeigt werden muss.

Beim Rendern von Komponenten besteht die Hauptidee von Vue-Router darin, die zu rendernde Komponente auf einer RouterView-Komponente bereitzustellen. Wenn sich die Route ändert, rendert die RouterView-Komponente die entsprechende Komponente basierend auf den aktuellen Routendatensatzinformationen.
2. Vue-router bietet auch einige Routennavigations-APIs wie $router.push() und $router.replace(), die zum Springen und Ersetzen von Routen in Komponenten verwendet werden.

3. Zusammenfassung

Vue-Router kann uns als offizielles Routing-Management-Tool von Vue.js dabei helfen, schnell Single-Page-Anwendungen zu erstellen. Das zugrunde liegende Implementierungsprinzip des Vue-Routers wird hauptsächlich durch die Überwachung von URL-Änderungen, den Abgleich von Routing-Regeln und das Rendern von Komponenten implementiert. Vue-Router kapselt intern den Routing-Änderungsmechanismus, der basierend auf Änderungen in der URL bestimmen kann, ob vorwärts oder rückwärts bewegt werden soll, und die entsprechende Ansicht anzeigen kann. Gleichzeitig bietet Vue-Router eine praktische API zum Weiterleiten von Sprüngen und Ersetzungen in Vue-Komponenten. Die Beherrschung der Prinzipien und der Verwendung von Vue-Router kann uns dabei helfen, Single-Page-Anwendungen besser zu erstellen und unsere Front-End-Entwicklungsfähigkeiten zu verbessern.

Das obige ist der detaillierte Inhalt vonWie Vue-Router Routing-Sprünge und Seitenrendering implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!