Detaillierte Erläuterung der Verwendung des Front-End-Routings für die Single-Page-Anwendung von vue

Dieses Mal erkläre ich Ihnen ausführlich die Verwendung des Front-End-Routings für Vue-Einzelseitenanwendungen. Was sind die Vorsichtsmaßnahmen für die Verwendung des Front-End-Routings für Vue-Einzelseitenanwendungen? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

steht vorne: Normalerweise gibt es zwei Möglichkeiten, Front-End-Routing in SPA zu implementieren:

1. window.history

2. Standort. Hash

Das Folgende ist eine Einführung in die Implementierung dieser beiden Methoden

1. Geschichte

1. Grundlegende Einführung in den Verlauf

Das window.history-Objekt enthält den Verlauf des Browsers. Das window.history-Objekt muss nicht das Fensterpräfix verwenden es schreiben. History ist eine gängige Methode zur Implementierung des SPA-Frontend-Routings. Sie verfügt über mehrere Originalmethoden:

1. history.back() – dasselbe wie das Klicken auf die Zurück-Schaltfläche im Browser

2. history.forward() – Identisch mit dem Klicken auf die Schaltfläche „Vorwärts“ im Browser

3. history.go(n) – Akzeptiert eine Ganzzahl als Argument und verschiebt sich zu Die durch diese Ganzzahl angegebene Seite, zum Beispiel, go(1) entspricht vorwärts(), go(-1) entspricht back(), go(0) entspricht dem Aktualisieren der aktuellen Seite

4. wenn die verschobene Position die Grenze des Zugriffsverlaufs überschreitet. Die oben genannten drei Methoden melden keinen Fehler, sondern schlagen stillschweigend fehl

In HTML5 ist das History-Objekt schlägt die Methode pushState() und die Methode replacementState() vor. Diese beiden Methoden können verwendet werden, um Daten zum Verlaufsstapel hinzuzufügen, genau wie bei einer URL-Änderung (in der Vergangenheit änderte sich nur der URL-Änderungsverlaufsstapel). ), sodass Sie den Browserverlauf und die Weiterleitung gut simulieren können. Nach dem Rückzug wird auch das aktuelle Front-End-Routing nach diesem Prinzip implementiert.

2.history.pushState

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

1. stateObj: Ein Statusobjekt, das sich auf die angegebene URL bezieht. Wenn das Popstate-Ereignis ausgelöst wird, wird das Objekt an die Callback-Funktion übergeben. Wenn dieses Objekt nicht benötigt wird, kann hier null ausgefüllt werden.

2. title: Der Titel der neuen Seite, aber derzeit ignorieren alle Browser diesen Wert, daher kann hier null ausgefüllt werden.

3. 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 sind mehrere Dinge zu beachten:

Die pushState-Methode löst keine Seitenaktualisierung aus, sondern bewirkt lediglich eine Änderung des Verlaufsobjekts und der Adressleiste reagiert. Der Browser wird nur aktualisiert, wenn Ereignisse wie vorwärts und rückwärts (back() und forward() usw.) ausgelöst werden

Die URL hier ist durch die Same-Origin-Richtlinie eingeschränkt, um bösartige Skripte zu verhindern von der Nachahmung anderer Website-URLs zur Täuschung des Benutzers. Wenn also gegen die Same-Origin-Richtlinie verstoßen wird, wird ein Fehler gemeldet

3.history.replaceState

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

4.popstate Ereignis

Definition: Immer wenn sich der Browserverlauf desselben Dokuments (wenn das Verlaufsobjekt) ä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. Nur der Benutzer klickt auf die Schaltflächen „Zurück“ und „Vorwärts“ des Browsers oder verwendet JavaScript, um die Funktionen „Zurück“, „Weiter“ aufzurufen. und go-Methoden Es wird nur ausgelöst, wenn. 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).

5.history implementiert Spa-Front-End-Routing-Code

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

Der in der Popstate-Listening-Funktion gedruckte e.state ist der dritte Wert, der in History.pushState übergeben wird () Ein Parameter, hier ist er {name: 'api'}

二.Hash

1.Hash基本介绍

url 中可以带有一个 hash http://localhost:9000/#/a.html

window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件：

1. 直接更改浏览器地址，在最后面增加或改变#hash；

2. 通过改变location.href或location.hash的值；

3. 通过触发点击带锚点的链接；

4. 浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。

2.Hash实现spa前端路由代码

  // 注册路由
  document.querySelectorAll('.api').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)

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue.js实现操作class的方法

D3.js实现动态仪表盘案列

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Front-End-Routings für die Single-Page-Anwendung von vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!