如何在纯 JavaScript 中实现动态嵌套路由跳转（非页面刷新式导航）-html教程-PHP中文网

如何在纯 JavaScript 中实现动态嵌套路由跳转（非页面刷新式导航）

本文讲解如何使用原生 JavaScript 模拟 React Router 的动态、嵌套路由行为，避免传统 window.location.replace() 导致的 404 错误，通过哈希路由（Hash Routing）实现单页应用式的路径切换与内容响应。

本文讲解如何使用原生 javascript 模拟 react router 的动态、嵌套路由行为，避免传统 `window.location.replace()` 导致的 404 错误，通过哈希路由（hash routing）实现单页应用式的路径切换与内容响应。

在你的原始代码中，调用 window.location.replace('/123') 实际触发的是服务端路由请求——浏览器会向服务器发起对 /index.html/123 的 GET 请求，而静态服务器（如本地 file:// 或简易 HTTP 服务）通常不支持该路径，因此返回 “Cannot GET /index.html/123” 错误。

✅ 正确思路：采用 前端哈希路由（Hash-based Routing） ——利用 URL 中 # 后的内容（即 hash）作为路由标识，不触发页面重载，完全由 JavaScript 控制视图渲染。

✅ 推荐解决方案：基于 location.hash 的动态路由

修改你的 main.js 如下：

java-enterprise

Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、

下载

// 路由映射表：定义路径对应的内容或组件逻辑
const routes = {
  '/123': () => renderContent('这是动态页面 123'),
  '/about': () => renderContent('关于页面'),
  '/user/456': () => renderContent('用户 ID: 456'),
  '/': () => renderContent('首页')
};

// 渲染函数（可替换为 DOM 操作、模板字符串或真实组件）
function renderContent(content) {
  document.body.innerHTML = `
    <h1>${content}</h1>
    <a href="#" onclick="goTo('/')">← 返回首页</a>
  `;
}

// 导航函数：更新 hash 并触发路由
function goTo(path) {
  window.location.hash = path;
}

// 初始化：监听 hash 变化
window.addEventListener('hashchange', handleRoute);
window.addEventListener('load', handleRoute); // 页面首次加载时也执行

function handleRoute() {
  const path = window.location.hash.slice(1) || '/';
  const routeHandler = routes[path] || routes['/'];
  routeHandler();
}

// HTML 中按钮改用 goto123 → goTo('/123')
// 注意：无需再拼接完整 URL，直接操作 hash 即可

同时更新 HTML 中的按钮：

<button onclick="goTo('/123')">Go to 123</button>
<button onclick="goTo('/about')">Go to About</button>
<button onclick="goTo('/user/456')">Go to User 456</button>

⚠️ 关键注意事项

window.location.hash 是唯一安全、无刷新、兼容性极佳的原生前端路由机制（支持 IE8+）；
不要使用 replace() 或 assign() 拼接绝对路径（如 /123），那会强制服务端响应；
哈希路由 URL 示例：http://localhost:3000/#/123 → 浏览器不会向服务器请求 /123，仅触发 hashchange 事件；
若需支持 history.pushState（无 # 的干净 URL），则必须配合服务端配置（如 Nginx 的 try_files 或 Express 的 fallback 路由），否则仍会 404；纯前端静态环境推荐坚持哈希路由；
动态嵌套路由（如 /user/:id）可通过正则或 path-to-regexp 库解析 location.hash 字符串，实现参数提取。