最近、Vue-RouterのHTML5 History Modeの実装を見て、HTML5の歴史を研究しました。
1。History.PushStateHistory.PushState（STATE、TITLE、URL）;
上記の最初と2番目のパラメーターは、主に3番目のパラメーターであり、新しい履歴レコードのアドレスを示します。現在のURL
2。history.replacestatehistory.replaceState（州、タイトル、URL）;
windo.history.replaceStateは、windo.pushstateに似ていますレコードポイントに追加されました。
3。window.onpopstateURLの変更を聞いてください
window.addeventlistener（popstate、function（）{varcrentstate = history.state;/**イベントをトリガーした後に実行されるプログラム*// //javaScriptスクリプトWindow.history.pushstateおよびwindow.history.replacestateを実行します。
ページ上のGoogleブラウザとFirefoxブラウザの反応は、OnPopstateイベントを回復するのが奇妙ですが、Firefoxブラウザは異なります。
第4に、Vue-Routerと同様のHTML5モードの例を以下に示します。 <！doctype html> <html lang = en> <head> <utf-8> <title> html5 historyモード（第2版）</title> <link = styleSheet type = text/css href = csss/ style.css> <text/css> ：30px：30px <body> <div class = container-bg> <ul class = pagination> <li> 1 </li> <li> 2 </li> <li> 3 </ul> </ul> </ul> < /ul> </ul> </ul> </ul> ul class = ptting> </ul> </div> <script type = text/javascript src = js/jquery-3.2.1.min.js> < /script> <script = text/javascript> Histor Y.ReplaceState（null、ページタイトル、http：//127.0.0.0.1：3000/lmw/0）。 SearchObject = {};/ *このオブジェクトは、次のようにプッシュステートのURLを保存するために使用されます。 /lmw/0：0}/var factor = function {var addva = document.href; query ==未定義？ +++++ Query、function（data）{var data2 = json.parse（data）; > '+data2.data [i] .name+' </li> '} $（'。ptting '）}}; function（）{var query = $（this）.index（）; $ .get（/page =+query、function（data）{var data2 = json.parse（data）; var ele = for（var i = 0; data2。 、http://127.0.0.1:3000/lmw/+que）; ：3000/+qury] = query}）}）//ブラウザが進むか、cure}}; >ちなみに、テストするためにnode.jsにサーバーコードを投稿します
var fs = request（ 'fs'）var path（ 'path'）var express = request（ 'expression'）var app.use（express.static（ './ position'）; ）; var router = expres.router（）; res.json（text.tostring（））} catch（err）{res.send（ 'haha！注：history.pushstate（{pageindex：1}、http：//127.0.0.1:3000/lmw/+ query）ここでの3番目のパラメーターは、相対的なものとして書かれている場合、完全な絶対パスを書き込みます。クエリとしての無制限のURLは、相対パスが現在のURLである必要があるため
サーバーは、data0.json、data1.json、data2.jsonで配置されています。データベースをシミュレートして、データを取得します。そして、フロントエンドに送信します
上記は、Xiaobianによって紹介されたHTML5の履歴モードです。 VEVBウーリンのウェブサイトへのご支援ありがとうございます！