如何在纯 JavaScript 中实现动态嵌套路由跳转（模拟前端路由）-html教程-PHP中文网

如何在纯 JavaScript 中实现动态嵌套路由跳转（模拟前端路由）

本文讲解如何使用原生 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')，但更简洁、语义清晰，且自动处理协议、域名和基础路径。

? 进阶：监听路由变化并渲染内容

仅跳转还不够——你可能需要根据哈希值动态加载/显示对应内容。可监听 hashchange 事件：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

// 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 方法构造元素。