最基础前端路由实现，事件popstate使用
<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;width: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>手机扫一扫
移动阅读更方便
你可能感兴趣的文章