Exemple de tutoriel du mode h5History

J'ai récemment vu l'implémentation du routage en mode Historique HTML5 dans vue-router, puis je suis allé étudier l'Histoire HTML5. Au fait, j'ai utilisé jquery pour écrire une implémentation similaire à l'Histoire HTML5. mode router dans vue-router , afin d'atteindre l'objectif de s'entraîner et de se familiariser avec celui-ci.

1. history.pushState

history.pushState(state, title, 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. Après avoir appelé la méthode pushState(), le navigateur ne chargera pas l'URL La nouvelle URL ne doit pas nécessairement être l'absolue . adresse. , s'il est par rapport à , il doit être par rapport à l'URL actuelle

2. history.replaceState

history.replaceState(state, title, url);

window.history.replaceState est similaire à window.history.pushState, la différence est que replaceState n'ajoutera pas d'historique dans window.history L'enregistrement de points a le même effet que , mais il n'ajoutera pas de nouveau point d'enregistrement aux points d'enregistrement historiques. window.location.replace(url)

3. window.onpopstate

pour

surveiller les changements d'URL

window.addEventListener("popstate",  currentState =

javascript

L'exécution du script et window.history.pushState window.history.replaceState ne déclencheront pas l'événement Cliquer en avant ou en arrière dans le onpopstatenavigateur déclenchera

. Les réponses de Google Chrome et Firefox sont différentes lorsque la page est ouverte pour la première fois. Google Chrome déclenche étrangement l'événement

, alors que Firefox ne le fait pas onpopstate

4. Postez-en un ci-dessous Exemples de modèles HTML5 similaires à vue-router. sont uniquement destinés à approfondir la compréhension et sont rédigés de manière très grossière.

76c82f278ac045591c9159d381de2c579fd01892b579bba0c343404bcccd70fb93f0f5c25f18dab9d176bd4f6de5d30ea80eb7cbb6fff8b0ff70bae37074b813b2386ffb911b14667cb8f0f91ea547a7HTML5 History 模式(第二版)6e916e0f7d1e588d4f442bf645aedb2f0e2747f14b81cd86c404d16c6ead21a346d5fe1c7617e3914f214aaf043f4ccf.container-bg{width:1000px; overflow: hidden; margin-right: 0 auto;}.pagination{width: 1000px; background-color: #d8d8d8; height: 30px; line-height: 30px;}.pagination li{width: 100px; height: 30px; background: red; float: left; cursor: pointer; color:#fff; margin: 0 10px 0 0;}531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86db0059ac5cf5908bb26cca21bb12cfd28051ed3719fd88644fafce0a58161256625edfb22a4f469ecb59f1190150159c61bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c62bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c63bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689b3b8810c81dca5c67dae79332813eebf929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba684fd2989e8d240aee500d7f8197e051e42cacc6d41bbb37262a98f745aa00fbf08019067d09615e43c7904885b5246f0a
    history.replaceState(null, "页面标题", "http://127.0.0.1:3000/lmw/0");//当页面载入时候，把url地址修改var searchObject = {};/*此对象用来保存下面pushState的URL作为key值，ajax要查询的ID为val
                           *例如：searchObject = {"http://127.0.0.1:3000/lmw/0":0}*/var factory = function(){var addva = document.location.href;//获取完整URLvar query = searchObject[addva];//找到该URL对应的值        query = (query == undefined ? 0 :query);//发起ajax加载页面        $.get("/page?page="+query,function(data){var data2 = JSON.parse(data);var ele = ""for(var i=0;i<data2.data.length;i++){
                        ele += '25edfb22a4f469ecb59f1190150159c6'+data2.data[i].name+'bed06894275b65c1ab86501b08a632eb'}
                    $('.ptting').html(ele)
                    
                }) 
        };    //点击分页切换事件            $(".pagination li").click(function(){var query=$(this).index();
                $.get("/page?page="+query,function(data){var data2 = JSON.parse(data);var ele = ""for(var i=0;i<data2.data.length;i++){
                        ele += '25edfb22a4f469ecb59f1190150159c6'+data2.data[i].name+'bed06894275b65c1ab86501b08a632eb'}
                    $('.ptting').html(ele)                    
                    history.pushState({pageIndex : 1}, "", "http://127.0.0.1:3000/lmw/"+query);//把当前pushState的url，和ajax查询的值存入对象，以供触发pushState事件的时候使用                    searchObject["http://127.0.0.1:3000/lmw/"+query] = query
                    
                })
            })//浏览器前进或者后退的时候触发popstate事件if (history.pushState) {
    window.addEventListener("popstate", function() {
        factory()                              
    });

    factory()
};2cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

Au fait, je posterai un code serveur dans node.js Pour tester, j'en ai simplement écrit un

var fs = require('fs')var path = require('path')var express = require('express')var app = express();
app.use(express.static('./public'));var router = express.Router();
router.get('/page',function(req,res){var page = req.query.pagetry{var text = fs.readFileSync('./data'+page+'.json');
        res.json(text.toString())
    }catch(err){
        res.send('哈哈！傻逼，没有拉！')    
    }
    
})

app.use(router)

app.listen(3000)

.

 注意：history.pushState({pageIndex : 1}, "", "http://127.0.0.1:3000/lmw/"+query)这里第三个参数写了完整的绝对路径，如果写成"/lmw/"+query这样的相对路径，会随着query值得增加无限在url后面追加，因为相对路径它一定是相对于当前的URL

Le serveur a placé data0.json, data1.json et data2.json pour simuler la récupération des données de la base de données. Le serveur a la valeur d'index (0/1/2) envoyée depuis le front-end pour correspondre. les données lues*.json puis envoyez-le au front-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!