So erstellen Sie mit Vue das Front-End-Routing für Single-Page-Anwendungen

Dieses Mal zeige ich Ihnen, wie Sie mit Vue das Front-End-Routing für Einzelseitenanwendungen erstellen. Welche Vorsichtsmaßnahmen gibt es für die Verwendung von Vue zum Erstellen des Front-End-Routings für Einzelseitenanwendungen? Schauen Sie mal rein.

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 das Verlaufsobjekt 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 wenn sich die URL ändert (in der Vergangenheit änderte sich nur die URL und der Verlaufsstapel). , sodass Sie den Browserverlauf und den Vor- und Rücklauf sehr gut simulieren können. Auch das aktuelle Frontend-Routing basiert auf diesem Prinzip.

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 dieses 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. Es wird nur ausgelöst, wenn der Benutzer auf die Schaltflächen „Zurück“ und „Vorwärts“ des Browsers klickt oder JavaScript zum Aufrufen der Schaltflächen „Zurück“, „Weiter“ und „Verwendet“ verwendet go-Methoden. Darüber hinaus zielt dieses Ereignis nur auf dasselbe Dokument ab. Wenn der Browserverlauf geändert wird und verschiedene 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 erste, der in History.pushState() übergeben wird Parameter hier sind {name: 'api'🎜>

2. Hash

1. Grundlegende Einführung in Hash

Die URL kann einen Hash enthalten: 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怎样部署nginx案例（附代码）

从零开始操作AngularJS实现应用模块化

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Vue das Front-End-Routing für Single-Page-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!