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 的内容；
• 绑定导航链接：给 加 onclick 阻止默认跳转，改用 pushState + 手动渲染。

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

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

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

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

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

• 定义路由表：把路径映射到组件，自动完成匹配、挂载、卸载；
• 路由守卫：在跳转前校验权限或保存草稿；
• 嵌套路由 & 参数解析：自动提取 :id、query，注入组件 props 或 Composition API；
• 结合状态管理（如 Redux、Pinia）：路由变化可触发 action，同步更新全局状态和 UI。

避免常见陷阱

手写或使用路由时容易忽略的细节：

• 服务端未配置 fallback：部署到静态服务器时，直接访问 /about 会 404，需让所有路径返回 index.html；
• 未处理重复 pushState：快速点击两次“首页”可能堆叠多个相同 history 记录，可用 replaceState 替代；
• 忽略可访问性：SPA 切换后要调用 document.title = ... 和 focus() 确保屏幕阅读器感知变化；
• 状态丢失：未监听 popstate 就只靠链接跳转，会导致浏览器前进/后退失效。