Récemment, j'ai vu la mise en œuvre du mode d'histoire HTML5 de Vue-Router, puis j'ai étudié l'histoire HTML5.
1. History.pushstateHistory.pushstate (état, titre, URL);
Les premier et deuxième paramètres ci-dessus peuvent être vides, principalement le troisième paramètre, indiquant l'adresse du nouvel enregistrement historique. URL de courant
2. HISTOIRE.History.Replacestate (État, titre, URL);
Windows.History.Replacestate est similaire à Window.History.pushstate. ajouté au point d'enregistrement.
3. Window.onpopstateVenez écouter les changements de l'URL
Window.addeventListener (popState, function () {varCrentState = History.State; / ** Programme à exécuter après le déclenchement de l'événement * /});Le script JavaScript exécute Window.history.pushstate et window.history.replaceState ne déclenchera pas l'événement OnPopState.
La réaction de Google Browser et Firefox Browser sur la page pour la première fois sur la page est différente.
Quatrièmement, un exemple de mode HTML5 similaire à Vue-Router est publié ci-dessous. <! Style.CSS> <Style Type = Text / CSS>. : 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 type = text / javascript> histor y.replacestate (null, titre de page, http: //127.0.0.1: 3000 / lmw / 0); SearchObject = {}; / * Cet objet est utilisé pour enregistrer l'URL de la Pushstate comme la valeur de clé suivante. / lmw / 0: 0: 0} / var factor = function () {var addva = document.href; query == Undefined? +++++ Query, fonction (data) {var data2 = json.parse (data); > '+ data2.data [i] .name +' </li> '} $ ('. ptting '). function () {var query = $ (this) .index (); $ .get (/ page? Page = + Query, fonction (data) {var data2 = json.parse (data); var ele = for (var i = 0; i <data2. , http://127.0.0.1:3000/lmw/+que); : 3000 / lmw / + qury] = requête})})}) // déclenchent l'événement PopState si le navigateur va de l'avant ou se retire. >Soit dit en passant, publiez un code de serveur dans Node.js. pour tester
Var fs = request ('fs') var path = reses ('path') var express = request = request ('expression') var app = express (); )); Res.json (text.toString ())} catch (err) {res.send ('haha! Idiot, pas de traction!)}) App.use (routeur) app.Listen (3000)Remarque: history.pushstate ({pageIndex: 1}, http://127.0.0.1:3000/lmw/+query) Le troisième paramètre écrit ici un chemin absolu complet, s'il est écrit comme un parent, le chemin sera ajouté avec L'URL illimitée comme requête, car le chemin relatif ce doit être l'URL actuelle
Le serveur est placé avec data0.json, data1.json, data2.json pour simuler la base de données pour obtenir des données. puis envoyer à l'avant
Ce qui précède est le mode historique du HTML5 introduit par Xiaobian. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!