Recentemente, vi a implementação do modo HTML5 da Vue-Router e depois estudei a história do HTML5.
1. History.pushstateHistory.pushstate (estado, título, URL);
O primeiro e o segundo parâmetros acima podem estar vazios, principalmente o terceiro parâmetro, indicando o endereço do novo registro histórico. URL atual
2. History.Replacestatehistory.Replacestate (estado, título, URL);
Window.History.Replacestate é semelhante ao Window.history.pushstate. adicionado ao ponto de registro.
3. Window.OnpopStateVenha e ouça as mudanças do URL
Window.adDeventListener (PopState, function () {varcrentState = history.state;/** Programa a ser executado após acionar o evento*/});O script javascript executa a janela.history.pushstate e window.history.replacestate não acionará o evento OnPopstate.
A reação do navegador do Google e do Firefox na página pela primeira vez na página é diferente.
Quarto, um exemplo de modo HTML5 semelhante ao Vue-Router é publicado abaixo. <! Style.CSS> <Tipo de estilo = CSS> .Container-BG {Width: 1000px; : 30px; <Body> <div class = container-bg> <l class = paginação> <li> 1 </li> <li> 2 </li> <li> 3 </ul></ul></ul> </li> </li> </li> </ul></ul></ul> < /l> /script> <script type = text/javascript> history y.replacestate (nulo, título da página, http: //127.0.0.0.1: 3000/lmw/0); SearchObject = {};/ *Este objeto é usado para salvar o URL do PushState como o seguinte. /lmw/0: 0: 0}/var fator = function () {var addva = document.href; consulta == indefinido? +++++ Query, function (dados) {var data2 = json.parse (dados); > '+data2.data [i] .name+' </li> '} $ ('. Ptting '). function () {var Query = $ (this) .Index (); = 0; , http://127.0.0.1:3000/lmw/+que); : 3000/lmw/+qury] = consulta})})}) // aciona o evento PopState se o navegador avança ou retirada >A propósito, poste um código de servidor em Node.js. para testar
Var fs = request ('fs') var path = reques ('path') var express = request = request ('expressão') var app = express (); ); Res.json (text.toString ())} catch (err) {res.send ('haha! Bobo, sem puxar!)}) App.use (roteador) app.Listen (3000)Nota: history.pushstate ({PageIndex: 1}, http://127.0.0.1:3000/lmw/+query) O terceiro parâmetro aqui escreve um caminho absoluto completo, se for escrito como relativa, o caminho será adicionado com o URL ilimitado como consulta, porque o caminho relativo deve ser o URL atual
O servidor é colocado com data0.json, data1.json, data2.json para simular o banco de dados para obter dados. E então envie para o front -end
O modo acima é o modo de história no HTML5 introduzido pela Xiaobian. Muito obrigado pelo seu apoio ao site VevB Wulin!