Detaillierte Erläuterung des Routing-Implementierungsprinzips von vuejs

Dieser Artikel bietet Ihnen eine detaillierte Erklärung des Routing-Implementierungsprinzips von vuejs. Ich hoffe, dass er für Freunde hilfreich ist.

Im allgemeinen Quellcode werden window.history und location.hash verwendet

Verlaufsimplementierung

Das window.history-Objekt enthält den Verlauf des Browsers und des Fensters. Beim Schreiben wird das Verlaufsobjekt verwendet. Sie müssen das Fensterpräfix nicht verwenden. History ist eine gängige Methode zur Implementierung des SPA-Frontend-Routings. Sie verfügt über mehrere Originalmethoden:

history.back()

Dasselbe wie das Klicken auf die Zurück-Schaltfläche im Browser

history.forward()

Entspricht dem Klicken auf die Schaltfläche „Weiter“ im Browser

history.go(n)

Akzeptiert eine Ganzzahl als Parameter und wechselt zu der durch die Ganzzahl angegebenen Seite. Zum Beispiel ist go(1) äquivalent zu forward(), go(-1) ist äquivalent zu back(), go(0) ist äquivalent zum Aktualisieren der aktuellen Seite
Wenn die verschobene Position die Grenze des Zugriffsverlaufs überschreitet, melden die oben genannten drei Methoden keinen Fehler, sondern schlagen stillschweigend fehl

In HTML5 schlägt das Verlaufsobjekt den pushState() vor. Diese beiden Methoden können zum Hinzufügen von Daten zum Verlaufsstapel verwendet werden, so als ob sich die URL geändert hätte (in der Vergangenheit änderte sich nur die URL und der Verlaufsstapel), sodass der Browserverlauf und Vorwärts und Rückwärts lassen sich ebenfalls gut simulieren.

history.pushState

pushState(stateObj, title, url) Die Methode schreibt Daten in den Verlaufsstapel (nicht größer als 640 KB). Der Parameter ist der Titel der Seite und der dritte Parameter ist die URL (relativer Pfad).

stateObj: Ein Statusobjekt, das sich auf die angegebene URL bezieht. Wenn das Popstate-Ereignis ausgelöst wird, wird dieses Objekt an die Callback-Funktion übergeben. Wenn dieses Objekt nicht benötigt wird, kann in diesem * null ausgefüllt werden.
title: Der Titel der neuen Seite, aber derzeit ignorieren alle Browser diesen Wert, daher kann hier null ausgefüllt werden.
URL: Die neue URL muss sich in derselben Domain wie die aktuelle Seite befinden. In der Adressleiste Ihres Browsers wird diese URL angezeigt.
Bei pushState gibt es mehrere Dinge, die es zu beachten gilt:

Die pushState-Methode löst keine Seitenaktualisierung aus, sondern bewirkt nur eine Änderung des Verlaufsobjekts und die Adressleiste reagiert nur, wenn Ereignisse wie „Weiterleiten“ auftreten und rückwärts werden ausgelöst (back () und vorwärts () usw.)
Die URL hier wird durch die Same-Origin-Richtlinie eingeschränkt, um zu verhindern, dass bösartige Skripte andere Website-URLs imitieren, um Benutzer zu täuschen, also wenn die Same-Origin-Richtlinie gilt Wenn ein Verstoß vorliegt, wird ein Fehler gemeldet

history.replaceState

Der Unterschied zwischen replaceState(stateObj, title, url) und pushState besteht darin, dass der aktuelle Datensatz nicht geschrieben, sondern ersetzt und geändert wird Der Browserverlauf ist genau derselbe wie bei pushState.

popstate-Ereignis

Definition: Immer wenn sich der Browserverlauf (d. h. das Verlaufsobjekt) desselben Dokuments ändert, wird das Popstate-Ereignis ausgelöst.
Hinweis: Das bloße Aufrufen der pushState-Methode oder der replaceState-Methode löst dieses Ereignis nicht aus. Es wird nur ausgelöst, wenn der Benutzer auf die Schaltflächen „Zurück“ und „Weiter“ des Browsers klickt oder JavaScript verwendet, um die Methoden „back“, „forward“ und „go“ aufzurufen. Darüber hinaus zielt dieses Ereignis nur auf dasselbe Dokument ab. Wenn der Wechsel des Browserverlaufs dazu führt, dass unterschiedliche Dokumente geladen werden, wird dieses Ereignis nicht ausgelöst.
Verwendung: Bei der Verwendung können Sie eine Rückruffunktion für das Popstate-Ereignis angeben. Der Parameter dieser Rückruffunktion ist ein Ereignisobjekt, und sein Statusattribut verweist auf das Statusobjekt, das von den Methoden pushState und replaceState für die aktuelle URL bereitgestellt wird (d. h. der erste Parameter dieser beiden Methoden).

HISTORY implementiert SPA-Front-End-Routing-Code

<a class="spa">abc.html</a>
<a class="spa">123.html</a>
<a href="/rdhub" class="spa ">rdhub</a>
  // 注册路由
  document.querySelectorAll('.spa').forEach(item => {
    item.addEventListener('click', e => {
      e.preventDefault();
      let link = item.textContent;
      if (!!(window.history && history.pushState)) {
        // 支持History API
        window.history.pushState({name: 'history'}, link, link);
      } else {
        // 不支持,可使用一些Polyfill库来实现
      }
    }, false)
  });

  // 监听路由
  window.addEventListener('popstate', e => {
    console.log({
      location: location.href,
      state: e.state
    })
  }, false)
popstate监听函数里打印的e.state便是history.pushState()里传入的第一个参数，在这里即为{name: 'history'}

Hash

Grundlegende Einführung in Hash

URL kann einen Hash enthalten http:// localhost :9000/#/rdhub.html

Ein Ereignis im Fensterobjekt ist onhashchange. Dieses Ereignis wird in den folgenden Situationen ausgelöst:

1. Ändern Sie die Browseradresse direkt unter das Ende Fügen Sie den #hash hinzu oder ändern Sie ihn, indem Sie den Wert von location.href oder location.hash ändern, indem Sie einen Klick auslösen auf einem verankerten Link ;

2. Vorwärts und rückwärts des Browsers kann dazu führen, dass sich der Hash ändert, sofern die Hashwerte in den beiden Webseitenadressen unterschiedlich sind.

3. Hash implementiert SPA-Front-End-Routing-Code

   <a href="/rdhub" class="spa">rdhub</a>
   <a href="/abc" class="spa">abc</a>
   <a href="/123" class="spa">123</a>
   <a href="/hash" class="spa">hash</a>
     document.querySelectorAll('.spa').forEach(item => {
       item.addEventListener('click', e => {
         e.preventDefault();
         let link = item.textContent;
         location.hash = link;
       }, false)
     });
     // 监听路由
     window.addEventListener('hashchange', e => {
       console.log({
         location: location.href,
         hash: location.hash
       })
     }, false)

4. Vergleich der beiden Modi

Die neue URL set by pushState can Es ist jede URL, die denselben Ursprung wie die aktuelle URL hat, und der Hash kann nur den Teil nach # ändern, sodass nur die URL desselben Dokuments wie das aktuelle festgelegt werden kann

Das Die von pushState festgelegte neue URL kann genau mit der aktuellen URL identisch sein. Der durch den Hash festgelegte neue Wert muss sich daher vom Original unterscheiden, um das Hinzufügen des Datensatzes zum Stapel auszulösen

hash模式与history模式，这两种模式都是通过浏览器接口实现的，除此之外vue-router还为非浏览器环境准备了一个abstract模式，其原理为用一个数组stack模拟出浏览器历史记录栈的功能。当然，以上只是一些核心逻辑，为保证系统的鲁棒性源码中还有大量的辅助逻辑，也很值得学习。pushState kann über stateObject jede Art von Daten zum Datensatz hinzufügen, während Hash nur kurze Zeichenfolgen hinzufügen kann

pushState kann zusätzlich das Titelattribut für die spätere Verwendung festlegen

Ein Problem mit dem Verlaufsmodus

Wir wissen, dass das ideale Verwendungsszenario für Einzelseitenanwendungen darin besteht, index.html nur beim Aufrufen der Anwendung zu laden, und nachfolgende Netzwerkvorgänge werden über Ajax abgeschlossen, und das wird auch der Fall sein nicht darauf basieren Die URL fordert die Seite erneut an, es ist jedoch unvermeidlich, dass besondere Umstände auftreten, z. B. wenn der Benutzer direkt in die Adressleiste tippt und die Eingabetaste drückt, der Browser neu startet und die Anwendung neu lädt usw.

Der Hash-Modus ändert nur den Inhalt des Hash-Teils und der Hash-Teil wird nicht in die HTTP-Anfrage aufgenommen:

http://rdhub.cn/#/user/id / / Beispielsweise wird bei der erneuten Anforderung nur http://rdhub.cn/
gesendet, sodass beim Anfordern einer Seite basierend auf der URL im Hash-Modus kein Problem auftritt.

Der Verlaufsmodus ändert die URL so, dass sie mit der normalen Backend-URL der Anfrage übereinstimmt
http://rdhub.cn/user/id
Senden Sie in diesem Fall die Anfrage erneut an das Backend Wenn das Backend nicht mit der Routing-Verarbeitung entsprechend /user/id konfiguriert ist, wird ein 404-Fehler zurückgegeben.

Die offiziell empfohlene Lösung besteht darin, eine Kandidatenressource auf dem Server hinzuzufügen, die alle Situationen abdeckt: Wenn die URL mit keiner statischen Ressource übereinstimmt, sollte sie dieselbe index.html-Seite zurückgeben, von der Ihre App abhängt auf. Gleichzeitig gibt der Server danach keine 404-Fehlerseite mehr zurück, da die Datei index.html für alle Pfade zurückgegeben wird. Um dies zu vermeiden, decken Sie alle Routing-Situationen in der Vue-Anwendung ab und geben Sie dann eine 404-Seite an. Oder wenn Sie Node.js als Backend verwenden, können Sie serverseitiges Routing verwenden, um die URL abzugleichen, und 404 zurückgeben, wenn keine Route übereinstimmt, und so ein Fallback implementieren.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Routing-Implementierungsprinzips von vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!