최근에 Vue-Router의 HTML5 히스토리 모드를 구현 한 다음 HTML5 역사를 연구했습니다.
1. history.pushstatehistory.pushstate (상태, 제목, URL);
위의 첫 번째 및 두 번째 매개 변수는 주로 세 번째 매개 변수 일 수 있습니다. 현재 URL
2. 역사. 간과history.replacestate (상태, 제목, URL);
window.replacestate는 Window.history.pushstate와 유사합니다 레코드 포인트에 추가되었습니다.
3. Window.onpopstate와서 URL의 변화를 들어보십시오
window.adeventListener (PopState, function () {varcrentState = history.state;/** 이벤트를 트리거 한 후 실행할 프로그램*/});javaScript 스크립트는 window.history.pushstate and window.history.replacestate가 OnPopState 이벤트를 트리거하지 않습니다.
페이지에서 처음으로 페이지에서 Google 브라우저 및 Firefox 브라우저의 반응은 OnPopState 이벤트를 복구하는 것이 이상합니다.
넷째, vue-router와 유사한 HTML5 모드의 예는 순전히 심화되고 거칠다. <! style.css> <텍스트/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 클래스 = ptting> </ul> </div> <스크립트 유형 = 텍스트/javaScript src = js/jquery-3.2.1.min.js> < /script> <script type = text/javaScript> histor y.replacestate (null, 페이지 제목, http : //127.0.0.1 : 3000/lmw/0); SearchObject = {};/ *이 개체는 푸시 스테이트의 URL을 다음 키 값으로 저장하는 데 사용됩니다. /lmw/0 : 0 : 0}/var factor = {var addva = document.href; query == undefined? // ajax로드 시작 $ .get (/page? +++++++++++++++++++ +++++ 쿼리, 함수 (data) {var data2 = json.parse (data) for (var i = 0; i <data2.data.length; i ++) {ele+= '<li > '+data2.data [i] .name+'</li> '} $ ('. ptting ')}. function () {var query = $ (this) .index (); = 0; Data.length; , http://127.0.0.1:3000/lmw/+ que); : 3000/lmw/+qury] = query})}) // Browser가 전진하거나 퇴각하는 경우}; >그건 그렇고, 테스트하기 위해 서버 코드를 게시하십시오
var fs = request ( 'fs') var path = reques ( 'path') var express = request ( 'expression') var app = appl.use (express.static ( './ position'); ); var router = express.router (); res.json (text.tostring ())} catch (err) {res.send ( 'haha! silly, no pull!)) app.use (router) app.listen (3000)참고 : history.pushstate ({pageindex : 1}, http://127.0.0.1:3000/lmw/+ Query) 여기에 세 번째 매개 변수는 완전한 절대 경로를 씁니다. 상대 경로는 현재 URL이어야하기 때문에 무제한 URL입니다.
서버는 data0.json, data1.json, data2.json과 함께 배치되어 데이터베이스를 시뮬레이션하여 데이터를 얻으려면 데이터*.json 파일에 일치합니다. 그런 다음 프론트 엔드로 보냅니다
위는 Xiaobian이 소개 한 HTML5의 역사 모드입니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!