Analyse des Unterschieds zwischen Hash- und Verlaufsmodus im Vue-Router

Dieser Artikel teilt Ihnen eine Analyse der Unterschiede zwischen Hash- und Verlaufsmodi im Vue-Router. Der Inhalt ist sehr gut. Ich hoffe, er kann allen helfen.

Wie wir alle wissen, verfügt der Vue-Router über zwei Modi: den Hash-Modus und den Verlaufsmodus.

Hash-Modus

Das Prinzip hinter dem Hash-Modus ist das onhashchange-Ereignis, das am Fensterobjekt überwacht werden kann:

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL);
  let hash = location.hash.slice(1);
  document.body.style.color = hash;
}

Der obige Code kann die Schriftfarbe der Seite ändern, indem er den Hash ändert. Obwohl er nutzlos ist, veranschaulicht er das Prinzip bis zu einem gewissen Grad.

Der wichtigere Punkt ist, dass Sie feststellen werden, dass die Vorwärts- und Rückwärtsbewegungen des Browsers verwendet werden können, da der Hash der URL-Änderungen vom Browser aufgezeichnet wird, und wenn Sie auf „Zurück“ klicken, wird die Schriftfarbe der Seite geändert auch ändern. Auf diese Weise wurde der Seitenstatus einzeln mit der URL verknüpft, obwohl der Browser den Server nicht anforderte. Später gaben ihm die Leute einen dominanten Namen namens Front-End-Routing und es wurde zur Standardkonfiguration von Einzelseitenanwendungen .

NetEase Cloud Music und Baidu Netdisk verwenden Hash-Routing, das wie folgt aussieht:
http://music.163.com/#/friend

https://pan.baidu.com/disk/home#list/vmode=list

History-Routing

Mit der Einführung der History-API begann sich das Front-End-Routing zu entwickeln Bei der vorherigen Hash-Änderung können Sie nur das URL-Fragment nach # ändern, während die Verlaufs-API dem Front-End völlige Freiheit gibt

Die Verlaufs-API kann unterteilt werden in 2 Informationen zu den meisten Wechseln und Änderungen finden Sie im MDN

Das Wechseln des historischen Status

umfasst drei Methoden: Zurück, Vorwärts und Los, die der Vorwärtsbewegung des Browsers entsprechen. Rückwärts und Springen In Bezug auf die Bedienung sagten einige Schüler, dass der (Google-)Browser nur vorwärts und rückwärts verfügt und es keinen Sprung gibt. Nun, wenn Sie die Maus auf die Vorwärts- und Rückwärtstasten drücken und gedrückt halten, wird der Verlauf angezeigt Aktuelle Fenster werden angezeigt, sodass Sie springen können (vielleicht ist es besser, es „Springen“ zu nennen):

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

Historischen Status ändern

Enthält zwei Methoden, pushState und replaceState, die drei Parameter empfangen: stateObj, title, url

history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
  console.log(event.state)
  if(event.state && event.state.color === 'red'){
    document.body.style.color = 'red';
  }
}
history.back();
history.forward();

Speichern Sie den Status der Seite in Das Statusobjekt kann über pushstate abgerufen werden, und wenn sich die URL der Seite wieder in diese URL ändert, kann der Seitenstatus wiederhergestellt werden Tatsächlich können die Position der Bildlaufleiste, der Lesefortschritt und die Komponentenschalter alle im Status gespeichert werden.

Wovor hast du im Verlaufsmodus Angst?

Durch die Verlaufs-API haben wir das hässliche # verloren, aber es gibt auch ein Problem:

Ich habe keine Angst davor, vorwärts zu gehen, keine Angst davor, zurückzugehen. Ich habe Angst vor der Aktualisierung, f5 (wenn das Backend nicht vorbereitet ist), da die Aktualisierung eine echte Anforderung an den Server ist, nicht virtuell.

Im Hash-Modus ändert das Front-End-Routing die Informationen in #, aber der Browser spielt bei der Anforderung nicht damit, sodass es kein Problem gibt. Im Verlauf können Sie den Pfad jedoch frei ändern erfrischend: Wenn keine entsprechende Antwort oder Ressource auf dem Server vorhanden ist, wird jede Minute eine 404 angezeigt.

Wenn Sie also einen Single-Page-Blog auf github.io erstellen möchten, sollten Sie den Hash-Modus wählen.

Verwandte Empfehlungen:

So aktualisieren Sie Token in Vue

SFC und spezifische Analyse von vue-loader

Das obige ist der detaillierte Inhalt vonAnalyse des Unterschieds zwischen Hash- und Verlaufsmodus im Vue-Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!