javascript如何实现路由_单页应用是怎样管理页面状态的

单页应用（SPA）通过浏览器历史API和DOM动态更新实现无刷新路由，路由决定显示内容，状态决定显示形态，现代框架封装了匹配、守卫、嵌套等能力并需注意服务端fallback等陷阱。

单页应用（SPA）不刷新页面就能切换视图，核心靠的是前端路由和状态管理。JavaScript 本身没有内置路由，但可以通过浏览器历史 API（history.pushState、history.replaceState）配合 URL 监听（popstate 事件）来模拟“跳转”，再结合 DOM 动态更新实现页面切换。

用原生 API 手写一个简易前端路由

不依赖框架也能实现基础路由功能：

• 监听 URL 变化：用 window.addEventListener('popstate', ...) 捕获浏览器前进/后退；
• 手动修改 URL：调用 history.pushState({page: 'about'}, '', '/about') 更新地址栏且不刷新；
• 匹配路径并渲染：解析 location.pathname，用 if 或 switch 判断当前路由，然后替换 document.getElementById('app').innerHTML 的内容；
• 绑定导航链接：给 <a></a> 加 onclick 阻止默认跳转，改用 pushState + 手动渲染。

路由与页面状态如何协同工作

路由决定“显示什么”，状态决定“显示成什么样”。两者常一起管理：

• URL 路径参数（如 /user/123）可直接作为数据 ID，触发请求获取对应用户信息；
• 查询参数（如 ?tab=posts&sort=latest）常用于控制列表筛选、排序等 UI 状态；
• 滚动位置、表单输入、模态框开关等临时状态，通常不写进 URL，而是存在内存变量或 sessionStorage 中；
• 若需持久化或分享（如回到某搜索结果页），就把关键状态同步到 URL，保证刷新后可复原。

现代 SPA 框架怎么简化这件事

React Router、Vue Router、Angular Router 等封装了底层逻辑，提供声明式路由配置和组件级状态联动：

标签： vue react javascript java html 前端 浏览器 app session switch 路由