Was sind die Vue-Routing-Modi?

Vue-Routing-Modi umfassen: 1. Hash-Modus, der den Hash-Wert der URL als Route verwendet und alle Browser unterstützt, das „#“-Zeichen im URL-Pfad erscheint; 2. Verlaufsmodus, der auf der HTML5-API (von alten Browsern nicht unterstützt) und der HTTP-Serverkonfiguration basiert. Ohne Hintergrundkonfiguration wird 404 angezeigt, wenn die Seite aktualisiert wird. 3. Abstrakter Modus, anwendbar auf alle JavaScript-Umgebungen, falls nicht Browser-API wird der Router automatisch in diesen Modus gezwungen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Routing-Modus-Analyse

Hier werden wir über den Routing-Modus von Vue-Router sprechen. Das erste, was Sie verstehen müssen, ist, dass das Routing aus mehreren URLs besteht und Sie entsprechend zu verschiedenen Orten navigieren können. Wenn Sie Serverentwicklung betrieben haben oder sich mit dem http-Protokoll auskennen, wissen Sie, dass der Zugriff auf die Seite im Browser zustandslos ist, sodass wir beim Wechseln verschiedener Seiten erneut eine Anfrage stellen. Wenn Sie tatsächlich mit Vue und Vue-Router entwickeln, werden Sie verstehen, dass beim Wechseln der Seite keine erneute Anforderung oder Aktualisierung der Seite erfolgt. Es sieht so aus, als ob die Seite zustandsbehaftet ist. Dies wird tatsächlich mithilfe der Verlaufs-API des Browsers erreicht, die es ermöglicht, zur Seite zu springen, ohne sie zu aktualisieren, und der Status der Seite im Browser beibehalten wird.

1. Hash-Modus

Verwenden Sie den Hash der URL, um eine vollständige URL zu simulieren. Wenn sich die URL ändert, wird die Seite nicht neu geladen und im angezeigten Netzwerkpfad wird ein „#“-Zeichen angezeigt. Das ist ein bisschen hässlich. Dies ist der sicherste Modus, da er mit allen Browsern und Servern kompatibel ist.

1- Funktionen: Auf der Hash-Modus-URL-Adresse steht „#“#'

 <a href=&#39;#/aaa&#39;>1(#/aaa)</a>

其中#/aaa就是我们的hash值,并且hash值并不会传给服务器

2-实现的原理：

原生的hashChange事件，主要是通过事件监听hash值得变化 window.onHashChange=function(){}

3-刷新页面：

不会不发生请求，页面不会有任何问题，不需要后端配合

而且hash模式的兼容性比较好.不过他因为带有'#'所以他的美观行没有history 模式好。

二、history模式

美化后的hash模式，会去掉路径中的 “#

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

wobei #/aaa unser Hash-Wert ist und der Hash-Wert nicht an den Server übergeben wird

2-Prinzip der Implementierung:

Das native hashChange-Ereignis überwacht hauptsächlich Hash-Wertänderungen durch Ereignisse window.onHashChange=function(){}3-Aktualisieren Sie die Seite:

Nein, es erfolgt keine Anfrage, es treten keine Probleme mit der Seite auf, es ist keine Back-End-Kooperation erforderlich

und der Hash-Modus ist besser kompatibel. Da er jedoch „#“ enthält, sind seine schönen Zeilen nicht so gut als Verlaufsmodus.

2. Verlaufsmodus

Der verschönerte Hash-Modus entfernt „#“ im Pfad. Es basiert auf dem Verlauf und der PushState-API von Html5, sodass Sie sich keine Gedanken über IE9 und spätere Versionen machen müssen. Es enthält außerdem drei Methoden: Zurück, Vorwärts und Gehen, die den Vorwärts-, Rückwärts- und Sprungvorgängen des Browsers entsprechen. Dabei handelt es sich um den Vorgang, der über die Vor- und Zurück-Schaltflächen in der oberen linken Ecke des Browsers ausgeführt wird. [Lernvideo-Sharing:

vue-Video-Tutorial

,

Web-Front-End-Video

]

const router = new VueRouter({routes, mode:'hash|history|abstract',})

Aber die Geschichte hat auch keine Angst vor Vorwärts- und Rückwärtssprüngen, aber Sie haben Angst vor Aktualisierungen (wenn das Backend nicht vorhanden ist). vorbereitet), weil die Aktualisierung echt ist. Fordern Sie den Server lokal an.

Zusammenfassend

🎜1: Der Hash-Modus (Vue-Router-Standardmodus-URL gefolgt von #) verwendet den Hash-Wert der URL als Route und unterstützt alle Browser. Nachteile: Sie können das folgende # nur ändern Implementieren Sie Routing Jump. 🎜 2: Verlaufsmodus (Wechsel in den Verlaufsmodus über den Modus: „Verlauf“). HTML5 (BOM)-Verlaufs-API- und Serverkonfigurationsmängel: Angst vor der Aktualisierung. Wenn das Backend diese Situation nicht bewältigt, fordert die Front-End-Aktualisierung tatsächlich an Server benötigt viel Zeit und ist sehr langsam. 🎜🎜🎜🎜3. Der abstrakte Modus 🎜🎜 wird als Fallback in Umgebungen verwendet, die keine Browser-APIs unterstützen. Die URL funktioniert Die Funktion, die im Allgemeinen erreicht werden soll, besteht darin, andere Routing-Seiten in die vorhandene Routing-Seite einzubetten und gleichzeitig den Routing-Pfad der aktuellen Seite weiterhin im Browser anzuzeigen. Dies ist ein abstrakter und vom Browser getrennter Routing-Modus. 🎜🎜Gilt für alle JavaScript-Umgebungen, z. B. serverseitig mit Node.js. Ohne die Browser-API wird der Router automatisch in diesen Modus gezwungen. 🎜🎜Dann wechseln Sie hier 🎜rrreee🎜. 🎜🎜 (Teilen von Lernvideos: 🎜Web-Frontend-Entwicklung🎜, 🎜Einfaches Programmiervideo🎜)🎜

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