Eine kurze Analyse des Unterschieds zwischen Hash-Routing und Verlaufs-Routing in Vue

Bei der Verwendung von Front-End-Rendering wie Vue oder React gibt es normalerweise zwei Routing-Methoden: Hash-Routing und Verlaufs-Routing. Was ist also der Unterschied zwischen diesen beiden Routing-Methoden? Lassen Sie mich es Ihnen unten vorstellen, ich hoffe, es wird Ihnen hilfreich sein!

Hash-Routing und Verlaufs-Routing Der Unterschied zwischen den beiden Modi lässt sich anhand der folgenden Aspekte klären:

1. Aussehen

hash: Das heißt, das # Symbol. Zum Beispiel diese URL: http://www.abc.com/#/hello, der Wert von hash ist #/hello. Seine Besonderheit besteht darin, dass der Hash zwar in der URL erscheint, aber nicht in die HTTP-Anfrage einbezogen wird und keinerlei Auswirkungen auf das Backend hat, sodass eine Änderung des Hashs die Seite nicht neu lädt. [Verwandte Empfehlungen: „vue.js Tutorialhash:  即地址栏 URL 中的#符号。 比如这个 URL：http://www.abc.com/#/hello， hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中， 但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。【相关推荐：《vue.js教程》】

history: 地址栏中没有 #。比如这个 URL：http://www.abc.com/hello，更美观，是个正常的url，适合推广宣传。

二、功能

history:  在开发app的时候有分享页面，这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合，让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就好了。

三、回车刷新

• hash: 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面;

• history： 利用了 HTML5 History Interface 中新增的 pushState() 和replaceState() 方法。

  这两个方法应用于浏览器的历史记录栈，在当前已有的 back()、forward()、go() 方法的基础之上，这两个方法提供了对历史记录进行修改的功能。当使用这两个方法执行修改时，只能改变当前地址栏的 URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行，一般会出现404，这时候就需要和后端人配合，设置重定向。

四、使用场景

一般情况下，hash 和 history 都可以，如果你是个颜值控，对 # 符号夹杂在 URL 里有些不爽。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面。调用 history.pushState() 相比于直接修改 hash，存在以下优势：

1. pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；

2. pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；

3. ushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串pushState()"]

history: in der Adresse bar Es gibt kein #. Beispielsweise ist diese URL: http://www.abc.com/hello schöner und eine normale URL, die sich für Werbung eignet.

2. Funktion

history: Bei der Entwicklung der App gibt es eine Freigabeseite, die mit Vue oder React erstellt wurde In einigen Apps darf die URL die #-Nummer nicht enthalten. Wenn Sie also die #-Nummer entfernen möchten, müssen Sie dies tun Verwenden Sie den Verlaufsmodus. Ein weiteres Problem bei der Verwendung des Verlaufsmodus besteht jedoch darin, dass beim Zugriff auf die sekundäre Seite während des Aktualisierungsvorgangs ein 404-Fehler angezeigt wird. Anschließend müssen Sie mit der Back-End-Person zusammenarbeiten und ihn die URL-Umleitung von Apache konfigurieren lassen nginx. Leiten Sie einfach auf Ihre Homepage-Route um.

3. Drücken Sie die Eingabetaste, um zu aktualisieren

• hash: Obwohl es in der URL erscheint, wird es nicht in die aufgenommen HTTP-Anfrage hat überhaupt keine Auswirkungen auf das Backend, daher wird die Seite durch Ändern des Hashs nicht neu geladen

• history: Nutzung des neuen pushState() ; code> in den Methoden HTML5 History Interface > und <code>replaceState(). Diese beiden Methoden werden auf den Verlaufsstapel des Browsers im aktuell vorhandenen back(), forward(), go() angewendet Mit der Methode code> bieten diese beiden Methoden die Funktion, historische Datensätze zu ändern. Wenn Sie diese beiden Methoden zum Durchführen von Änderungen verwenden, kann <strong>nur die URL der aktuellen Adressleiste geändert werden, aber der Browser sendet keine Anfrage an das Backend und löst auch nicht die Ausführung des Popstate-Ereignisses aus. Im Allgemeinen 404 wird angezeigt. Sie müssen mit den Back-End-Mitarbeitern zusammenarbeiten, um die Umleitung einzurichten. </strong>🎜🎜

4. Verwendungsszenarien 🎜🎜Im Allgemeinen sind sowohl Hash als auch Verlauf akzeptabel. Wenn Sie ein Schönheitsliebhaber sind, # Der -Symbol ist etwas unangenehm. 🎜🎜Wenn wir keinen hässlichen Hash wollen, können wir den Routing-History-Modus verwenden, der die API „history.pushState“ vollständig nutzt, um URL-Sprünge durchzuführen, ohne die Seite neu zu laden. Im Vergleich zur direkten Änderung des Hashs hat der Aufruf von History.pushState() folgende Vorteile: 🎜<ol> <li>🎜<code>pushState() Der neue URL-Satz kann eine beliebige URL sein, die denselben Ursprung hat wie die aktuelle URL; Der Hash kann nur den Teil nach # ändern, sodass Sie nur die URL desselben Dokuments wie die aktuelle URL festlegen können 🎜🎜

🎜pushState() Der neue URL-Satz kann genau mit der aktuellen URL übereinstimmen. Der durch den Hash festgelegte neue Wert muss sich vom ursprünglichen Wert unterscheiden, um die Aktion zum Hinzufügen des Datensatzes zum Stapel auszulösen >🎜ushState() kann über den stateObject-Parameter übergeben werden. Fügen Sie dem Datensatz beliebige Datentypen hinzu; während Hash nur kurze Zeichenfolgen pushState() hinzufügen und zusätzlich festlegen kann Titelattribut zur späteren Verwendung. 🎜🎜🎜🎜 5. Zusammenfassung🎜🎜Traditionelles Routing besteht darin, dass, wenn ein Benutzer auf eine URL zugreift, der entsprechende Server die Anforderung empfängt, dann den Pfad in der URL analysiert und dadurch die entsprechende Verarbeitungslogik ausführt und so eine Routenverteilung abschließt. 🎜🎜Das Front-End-Routing bezieht den Server nicht mit ein. Es wird vom Front-End mithilfe der Hash- oder HTML5-Verlaufs-API implementiert. Es wird im Allgemeinen für die Anzeige und Vermittlung verschiedener Inhalte verwendet. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideos🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Unterschieds zwischen Hash-Routing und Verlaufs-Routing in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!