<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h4>使用 h5 实现前端路由</h4> <ul> <li> <a onclick="home()">首页</a> </li> <li> <a onclick="message()">消息</a> </li> <li> <a onclick="mine()">我的</a> </li> </ul> <div id="showContent" style="height:240px;200px;background-color:red"> home </div> </body> <script type="text/javascript"> function home() { // 添加到历史记录栈中 history.pushState({ name: 'home', id: 1 }, null, "?page=home#index") showCard('home') }; function message() { history.pushState({ name: 'message', id: 2 }, null, "?page=message#haha") showCard('message') } function mine() { history.pushState({ id: 3, name: 'mine' }, null, "?name=tigerchain&&sex=man") showCard('mine') } // 监听浏览器回退 并且刷新到指定内容 window.addEventListener('popstate', function(event) { var content = ""; if(event.state) { content = event.state.name; } console.log(event.state) console.log("history 中的历史栈中的 name ：" + content) showCard(content) }) // 此方法和上面的方法是一毛一样的，只是两种不同的写法而已 // window.onpopstate = function (event) { // var content = ""; // if(event.state) { // content = event.state.name; // } // showCard(content); // } function showCard(name) { console.log("当前的 hash 值是：" + location.hash) document.getElementById("showContent").innerHTML = name; } </script> </html>