在JavaScript中实现简单的页面路由功能，可以通过监听URL的变化并根据不同的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 Router</title>
</head>
<body>
<nav>
<a href="#/">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>
</nav>
<div id="content"></div>
<script src="router.js"></script>
</body>
</html>
接下来，编写JavaScript代码来实现路由功能。
// router.js
// 定义路由表
const routes = {
'/': 'Home Page Content',
'/about': 'About Page Content',
'/contact': 'Contact Page Content'
};
// 获取内容容器
const contentDiv = document.getElementById('content');
// 路由函数
function router() {
// 获取当前URL的hash部分（去掉#）
let path = window.location.hash.slice(1) || '/';
// 根据路径从路由表中获取内容
contentDiv.innerHTML = routes[path] || '404 - Page Not Found';
}
// 监听hashchange事件
window.addEventListener('hashchange', router);
// 页面加载时初始化路由
window.addEventListener('load', router);
routes)：这是一个对象，键是路径，值是对应的页面内容。router 函数：这个函数根据当前的URL路径从路由表中获取内容，并将其插入到contentDiv中。hashchange 事件：当URL的hash部分发生变化时（即用户点击了导航链接），触发router函数。load 事件：页面加载时初始化路由，确保页面首次加载时也能正确显示内容。这个简单的路由实现可以通过以下方式进行扩展：
- 动态路由：支持带参数的路径，如/user/:id。
- 异步加载内容：通过fetch或XMLHttpRequest从服务器动态加载内容。
- 嵌套路由：支持嵌套的路由结构，适用于更复杂的应用。
如果你正在开发一个更复杂的应用，建议使用现有的前端框架（如React、Vue.js、Angular等），它们提供了更强大和灵活的路由功能。
通过这种方式，你可以避免在每个页面中重复编写相同的代码，并且可以轻松地管理和扩展你的页面路由。