在JavaScript中，实现简单的历史路由可以通过使用window.history API来避免页面代码冗余。历史路由允许你在不重新加载页面的情况下更改URL，并且可以通过浏览器的前进和后退按钮来导航。
以下是一个简单的实现示例：
首先，创建一个简单的HTML结构，包含一些导航链接和一个内容容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple History Routing</title>
</head>
<body>
<nav>
<a href="/" data-route="home">Home</a>
<a href="/about" data-route="about">About</a>
<a href="/contact" data-route="contact">Contact</a>
</nav>
<div id="content">
<!-- Content will be loaded here -->
</div>
<script src="app.js"></script>
</body>
</html>
接下来，编写JavaScript代码来处理路由逻辑。
// app.js
// 路由配置
const routes = {
'/': 'Home Page Content',
'/about': 'About Page Content',
'/contact': 'Contact Page Content'
};
// 获取内容容器
const content = document.getElementById('content');
// 初始化页面内容
function loadContent(path) {
content.innerHTML = routes[path] || '404 - Page Not Found';
}
// 处理导航点击事件
function handleNavigation(event) {
event.preventDefault();
const path = event.target.getAttribute('href');
history.pushState({}, '', path);
loadContent(path);
}
// 监听popstate事件，处理浏览器前进/后退
window.addEventListener('popstate', () => {
loadContent(window.location.pathname);
});
// 初始化页面
loadContent(window.location.pathname);
// 为所有导航链接添加点击事件监听器
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', handleNavigation);
});
routes对象定义了不同路径对应的内容。#content容器中。history.pushState更改URL，并加载相应的内容。popstate事件会被触发，此时重新加载内容。history.replaceState来替换当前的历史记录，而不是添加新的记录。通过这种方式，你可以实现一个简单的历史路由系统，避免页面代码冗余，并提升用户体验。