H5 History模式是一种前端路由的实现方式，与Hash模式不同，它利用了HTML5的history API，通过在真实url后面拼接“/”来实现路由的路径。在这种模式下，当“/”后的路径发生变化时，浏览器会重新发起请求，而不是触发onhashchange事件。通过这种方式，可以实现无刷新跳转的功能。
以下是一个使用HTML5 History API实现前端路由的简单例子：
<!DOCTYPE html>
<html>
<head>
<title>H5 History Mode Example</title>
</head>
<body>
<ul>
<li><a href="/" οnclick="navigateTo('/')">Home</a></li>
<li><a href="/about" οnclick="navigateTo('/about')">About</a></li>
<li><a href="/contact" οnclick="navigateTo('/contact')">Contact</a></li>
</ul>
<div id="content"></div>
<script>
// 处理路由变化
function handleRoute(route) {
// 根据路由显示不同的内容
switch (route) {
case '/':
document.getElementById('content').innerHTML = 'Home page';
break;
case '/about':
document.getElementById('content').innerHTML = 'About page';
break;
case '/contact':
document.getElementById('content').innerHTML = 'Contact page';
break;
default:
document.getElementById('content').innerHTML = 'Not found';
}
}
// 导航到不同的路由
function navigateTo(route) {
history.pushState(null, null, route); // 修改浏览器地址栏显示的URL，但不刷新页面
handleRoute(route); // 处理路由变化，显示对应的内容
}
// 监听浏览器的前进后退按钮事件
window.addEventListener('popstate', function(event) {
handleRoute(location.pathname); // 处理路由变化，显示对应的内容
});
</script>
</body>
</html>
在这个例子中，我们使用了HTML5的History API中的history.pushState()方法来修改浏览器的地址栏显示的URL，但不刷新页面。当用户点击导航链接时，会调用navigateTo()函数，将新的路由传递给handleRoute()函数处理，并显示对应的内容。同时，我们还监听了浏览器的前进后退按钮事件，当用户点击这些按钮时，会触发popstate事件，然后调用handleRoute()函数处理路由变化，并显示对应的内容。
603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
