javascript如何实现路由_有哪些前端路由方式

前端路由核心是不刷新页面改变URL并响应视图变化，分History API（推荐、需服务端配合）和Hash（兼容好、SEO差）两类，现代框架均封装此机制。

JavaScript 实现前端路由，核心是**不刷新页面的前提下改变 URL 并响应视图变化**。主流方式分两类：基于浏览器 History API（推荐）和基于 URL Hash（兼容老浏览器）。现代框架（如 React Router、Vue Router）底层都封装了这两种机制。

Hash 路由（# 开头）

利用 window.location.hash 变化触发路由，不向服务器发送请求，兼容性好（支持 IE8+）。

• URL 示例：https://example.com/#/home、https://example.com/#/user/123
• 监听方式：绑定 hashchange 事件，读取 location.hash.slice(1) 获取路径
• 跳转方式：修改 location.hash = '/about' 即可，浏览器自动记录历史
• 优点：简单、零服务端配置、无刷新、兼容强
• 缺点：URL 不够美观，SEO 不友好（搜索引擎通常忽略 # 后内容）

History 路由（HTML5 模式）

基于 history.pushState() 和 history.replaceState()，配合 popstate 事件实现无刷新导航，URL 更干净（如 /user/123）。

• 需服务端配合：所有前端路由路径都应返回同一份 HTML（如 index.html），否则直接访问会 404
• 监听前进/后退：用 window.addEventListener('popstate', handler)
• 跳转示例：history.pushState({ path: '/news' }, '', '/news')
• 注意：pushState 不触发页面刷新，但不会加载新资源——渲染逻辑完全由 JS 控制

手动实现一个极简路由（History 版）

适合理解原理，实际项目建议用成熟库：

立即学习“Java免费学习笔记（深入）”；

标签： vue react javascript java html js 前端 go html5 seo 浏览器 app 路由