javascript如何实现路由_有哪些前端路由方式-js教程-PHP中文网

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

紅蓮之龍

发布： 2025-12-22 18:57:08

原创

348人浏览过

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

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

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免费学习笔记（深入）”；

星辰Agent

科大讯飞推出的智能体Agent开发平台，助力开发者快速搭建生产级智能体

404

查看详情

function router() {
  const routes = new Map();
<p>function navigate(path) {
history.pushState({ path }, '', path);
render(path);
}</p><p>function render(path) {
const component = routes.get(path) || routes.get('/404');
document.getElementById('app').innerHTML = component?.() || 'Not Found';
}</p><p>window.addEventListener('popstate', e => render(e.state?.path || location.pathname));</p><p>return {
add: (path, handler) => routes.set(path, handler),
start: () => render(location.pathname)
};
}</p><p>// 使用
const app = router();
app.add('/', () => '<h1>首页</h1>');
app.add('/about', () => '<h1>关于</h1>');
app.start();

登录后复制

框架路由怎么选？

React 推荐 React Router v6+（基于 History API，默认 BrowserRouter）；Vue 推荐 Vue Router 4（支持 history 和 hash 模式，可配置）；纯 JS 项目可用 Page.js 或 Navigo 等轻量库。

基本原则：新项目优先用 History 路由（体验好、URL 正规），老项目或需 IE 支持再降级用 Hash 路由。

基本上就这些。不复杂但容易忽略服务端配置和 history 回退监听细节。

以上就是javascript如何实现路由_有哪些前端路由方式的详细内容，更多请关注php中文网其它相关文章！