เมื่อเร็ว ๆ นี้ฉันเห็นการใช้โหมดประวัติศาสตร์ HTML5 ของ Vue-Router จากนั้นศึกษาประวัติศาสตร์ HTML5 โดยวิธีการต่อไปนี้เป็นความเข้าใจของฉันเอง
1. ประวัติHistory.PushState (รัฐ, ชื่อ, URL);
พารามิเตอร์แรกและที่สองข้างต้นอาจว่างเปล่าส่วนใหญ่เป็นพารามิเตอร์ที่สามซึ่งระบุที่อยู่ของบันทึกประวัติศาสตร์ใหม่ URL ปัจจุบัน
2. ประวัติการแทนที่History.replacestate (รัฐ, ชื่อ, URL);
window.history.replacestate คล้ายกับ window.history.pushstate เพิ่มเข้าไปในจุดบันทึก
3. window.onpopstateมาฟังการเปลี่ยนแปลงของ URL
window.addeventListener (popstate, function () {varcrentState = history.state;/** โปรแกรมที่จะดำเนินการหลังจากทริกเกอร์เหตุการณ์*/});สคริปต์ JavaScript ดำเนินการ window.history.pushstate และ window.history.replacestate จะไม่กระตุ้นเหตุการณ์ onpopstate
ปฏิกิริยาของเบราว์เซอร์และเบราว์เซอร์ Firefox บนหน้าเว็บเป็นครั้งแรกในหน้านั้นแตกต่างกัน
ประการที่สี่ตัวอย่างของโหมด HTML5 คล้ายกับ Vue-Router ถูกโพสต์ด้านล่าง <! style.css> <style type = text/css> .container-bg {ความกว้าง: 1000px; : 30px; <body> <div class = container-bg> <ul class = pagination> <li> 1 </li> <li> 2 </li> <li> 3 </ul></ul> </ul> <li> /ul ></ul></ul> </ul> ul class = ptting> </ul> </div> <script type = text/javascript src = js/jQuery-3.2.1.min.js> < /สคริปต์> <script type = text/javascript> history y.replacestate (null, ชื่อหน้า, http: //127.0.0.0.1: 3000/lmw/0); SearchObject = {};/ *วัตถุนี้ใช้เพื่อบันทึก URL ของ pushstate ดังต่อไปนี้ /lmw/0: 0: 0}/var factor = function () {var addva = document.href; แบบสอบถาม == ไม่ได้กำหนด? +++++ แบบสอบถามฟังก์ชั่น (ข้อมูล) {var data2 = json.parse (ข้อมูล); > '+data2.data [i] .name+' </li> '} $ ('. ptting ') function () {var query = $ (this) .index (); = 0; , http://127.0.0.1:3000/lmw/+que); : 3000/LMW/+QURY] = Query})})}) // ทริกเกอร์เหตุการณ์ป๊อปสเตทหากเบราว์เซอร์ไปข้างหน้าหรือล่าถอย >โดยวิธีการโพสต์รหัสเซิร์ฟเวอร์ใน node.js เพื่อทดสอบ
var fs = คำขอ ('fs') var path = reques ('path') var express = request = request ('นิพจน์') var app = express (); ); เราเตอร์ var = express.router (); res.json (text.toString ())} catch (err) {res.send ('haha! silly, no pull!)}) app.use (เราเตอร์) app.listen (3000)หมายเหตุ: history.pushstate ({pageindex: 1}, http://127.0.0.1:3000/lmw/+Query) พารามิเตอร์ที่สามที่นี่จะเขียนเส้นทางที่สมบูรณ์แบบหากเขียนเป็นญาติ URL ไม่ จำกัด เป็นแบบสอบถามเนื่องจากเส้นทางสัมพัทธ์จะต้องเป็น URL ปัจจุบัน
เซิร์ฟเวอร์ถูกวางด้วย data0.json, data1.json, data2.json เพื่อจำลองฐานข้อมูลเพื่อรับข้อมูล จากนั้นส่งไปที่ปลายด้านหน้า
ข้างต้นเป็นโหมดประวัติใน HTML5 ที่ Xiaobian แนะนำ ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!