本文讲解如何使用原生 JavaScript 实现类似 React Router 的动态、嵌套路由跳转，避免服务器 404 错误，通过哈希路由（Hash Router）机制安全导航到 /123 等路径。
本文讲解如何使用原生 javascript 实现类似 react router 的动态、嵌套路由跳转，避免服务器 404 错误，通过哈希路由（hash router）机制安全导航到 `/123` 等路径。
在纯 HTML + Vanilla JS 项目中，直接修改 window.location.replace('/123') 会导致浏览器向服务器发起真实请求（如 GET /index.html/123），而静态服务器通常无法响应该路径，从而返回 “Cannot GET /index.html/123” 错误。根本原因在于：浏览器默认将 /123 解析为服务端路径，而非前端路由。
✅ 正确方案是采用 哈希路由（Hash-based Routing） —— 利用 URL 中 # 后的内容（即 fragment identifier）不触发页面刷新或服务端请求的特性，实现前端路由模拟。
✅ 推荐实现方式
将目标路径写入 URL 哈希部分，例如 /#/123：
<!-- index.html --> <button onclick="goto123()">Go to 123</button> <script src="main.js"></script>
// main.js
function goto123() {
// ✅ 正确：仅更新哈希，不触发服务端请求
window.location.hash = '/123';
}? window.location.hash = '/123' 等价于 window.location.replace(window.location.origin + window.location.pathname + '#/123')，但更简洁、语义清晰，且自动处理协议、域名和基础路径。
立即学习“Java免费学习笔记（深入）”；
? 进阶：监听路由变化并渲染内容
仅跳转还不够——你可能需要根据哈希值动态加载/显示对应内容。可监听 hashchange 事件：
// main.js
function handleRoute() {
const hash = window.location.hash.slice(1) || '/'; // 去掉 '#'，默认为 '/'
// 示例：简单路由映射
const routes = {
'/123': '<h2>Page 123</h2><p>Welcome to dynamic route!</p>',
'/about': '<h2>About</h2><p>This is the about page.</p>',
'/': '<h2>Home</h2><p>Default landing page.</p>'
};
document.body.innerHTML = routes[hash] || '<h2>404</h2><p>Route not found.</p>';
}
// 首次加载时执行
handleRoute();
// 监听哈希变化
window.addEventListener('hashchange', handleRoute);⚠️ 注意事项
- 不要拼接 window.location.href：href 包含完整 URL（如 http://localhost:3000/index.html），拼接 /123 会生成非法路径（如 .../index.html/123），导致 404。
- 哈希路由兼容性极好：所有现代浏览器均支持，且无需服务端配置。
- SEO 与分享限制：传统哈希路由对搜索引擎不友好（Google 已基本支持，但仍建议 SPA 使用 History API）；若需更好 SEO 或美观 URL（如 /123），应搭配服务端配置（如 Nginx fallback 至 index.html）+ History API（pushState），但这需确保服务端正确处理所有前端路由回退。
- 安全性提醒：动态插入 HTML（如 innerHTML）需防范 XSS，生产环境建议使用 textContent 或 DOM 方法构造元素。
✅ 总结
- ✅ 用 window.location.hash = '/xxx' 替代字符串拼接；
- ✅ 用 hashchange 事件驱动视图更新；
- ✅ 哈希路由是零配置、零服务端依赖的最简前端路由方案；
- ? 后续可平滑升级至 History API（需服务端配合）以支持无 # 的干净 URL。
现在，点击按钮即可无刷新跳转，并安全响应路由变化——你已掌握 Vanilla JS 动态嵌套路由的核心实践。
