本文介绍如何利用 `history.pushstate()` 和 dom 操作，在不刷新页面的前提下为数组中的每个对象动态生成独立 url 的“虚拟页面”，并配合内容渲染实现真正的前端路由效果。
在现代前端开发中，我们常需为数据集合（如产品列表、文章目录）自动生成对应详情页，但又不希望依赖后端逐个生成 HTML 文件。JavaScript 提供了强大的客户端路由能力——无需服务端配合，即可模拟多页面行为，并保持浏览器地址栏更新、支持前进/后退、书签收藏等原生体验。
核心在于 history.pushState()：它不会真正跳转或加载新文档，而是修改浏览器历史栈和当前 URL（需同源），同时允许你传入任意状态对象，便于后续恢复页面内容。
以下是一个完整可运行的实践示例：
// 示例数据：每个对象代表一个“页面”的元信息
const pagesData = [
{ id: "first", title: "第一页面", content: "这是第一个动态生成的页面内容。" },
{ id: "second", title: "第二页面", content: "欢迎来到第二个虚拟页面！" },
{ id: "third", title: "第三页面", content: "所有页面均由 JavaScript 即时构建。" }
];
// 1. 动态生成导航链接（插入到页面某容器中，例如 <nav id="nav"></nav>）
const nav = document.getElementById("nav");
pagesData.forEach(page => {
const link = document.createElement("a");
link.href = `/${page.id}`;
link.textContent = page.title;
link.style.marginRight = "12px";
link.addEventListener("click", (e) => {
e.preventDefault();
// 更新 URL 并压入历史记录
history.pushState({ ...page, type: "page" }, page.title, `/${page.id}`);
// 同步渲染页面内容
renderPage(page);
});
nav.appendChild(link);
});
// 2. 渲染当前页面内容（可复用）
function renderPage(data) {
document.title = data.title;
document.body.innerHTML = `
<header>
<h1>${data.title}</h1>
<a href="/" onclick="event.preventDefault(); history.back();">← 返回首页</a>
</header>
<main>
<p>${data.content}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12185" title="SEO-Awesome"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="SEO-Awesome" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12185" title="SEO-Awesome">SEO-Awesome</a>
<p>利用Google官方API实现全链路出海SEO自动化，批量生成PSEO页面，自动发布与GA4数据复盘。</p>
</div>
<a href="/xiazai/skill12185" title="SEO-Awesome" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
<button onclick="history.back()">返回上一页</button>
</main>
`;
}
// 3. 处理浏览器前进/后退（popstate 事件）
window.addEventListener("popstate", (event) => {
if (event.state?.type === "page") {
renderPage(event.state);
} else {
// 默认首页逻辑
document.title = "首页";
document.body.innerHTML = `<h1>欢迎访问动态页面站</h1><nav id="nav"></nav>`;
// 重新挂载导航（避免丢失事件监听）
const nav = document.getElementById("nav");
pagesData.forEach(page => {
const link = document.createElement("a");
link.href = `/${page.id}`;
link.textContent = page.title;
link.addEventListener("click", (e) => {
e.preventDefault();
history.pushState({ ...page, type: "page" }, page.title, `/${page.id}`);
renderPage(page);
});
nav.appendChild(link);
});
}
});
// 初始化首页
document.addEventListener("DOMContentLoaded", () => {
document.title = "首页";
document.body.innerHTML = `
<h1>动态页面演示站</h1>
<nav id="nav"></nav>
<div id="content"></div>
`;
// 自动挂载导航
const nav = document.getElementById("nav");
pagesData.forEach(page => {
const link = document.createElement("a");
link.href = `/${page.id}`;
link.textContent = page.title;
link.addEventListener("click", (e) => {
e.preventDefault();
history.pushState({ ...page, type: "page" }, page.title, `/${page.id}`);
renderPage(page);
});
nav.appendChild(link);
});
});✅ 关键注意事项：
- pushState() 修改的是当前域下的路径（如 /first），不是绝对 URL；若需完整域名，请确保部署在真实 Web 服务器（如 Nginx/Apache）上，并配置服务端 fallback（将所有未匹配路由重定向至 index.html），否则直接访问 /first 会 404。
- 本地文件协议（file://）下 pushState() 无法改变实际路径，仅能操作 hash 或受限路径，务必通过 http-server、Vite、Webpack Dev Server 等启动本地 HTTP 服务进行测试。
- 所有动态页面均为“客户端渲染”，SEO 友好性有限；如需搜索引擎索引，应结合服务端渲染（SSR）或静态站点生成（SSG）。
- 建议为每个页面状态添加唯一标识（如 id 或 url 字段），便于 popstate 中精准还原。
通过这种方式，你只需维护一份数据数组和一套模板逻辑，即可实现无限扩展的“伪多页”应用，兼顾用户体验与开发效率。
