JS实现路由的关键是监听URL变化并动态更新页面内容，主要有hash和history API两种方式。1. Hash路由通过监听window.onhashchange事件获取location.hash值，根据不同的hash值渲染对应页面内容，兼容性好但URL中带有#，影响美观。2. History API路由利用history.pushState和replaceState修改URL，结合onpopstate监听前进后退操作，URL更简洁，但需服务器配置支持，防止刷新时404。两种方式均可通过解析URL参数实现传参，如hash中分割字符串或使用URLSearchParams解析查询参数。为避免刷新导致路由失效，服务器需将所有路由重定向到index.html。此外，可使用React router等第三方库简化开发，支持嵌套路由、路由守卫等高级功能，提升开发效率。
JS实现路由，本质上就是根据不同的URL显示不同的内容。关键在于监听URL变化并更新页面。
解决方案
JS实现路由主要有两种方式：一种是利用
hash
（#）的变化，另一种是利用html5的
history
API。
Hash路由
Hash路由的原理是监听
window.onhashchange
事件。当URL中的
#
后面的内容发生变化时，会触发这个事件。我们可以通过读取
location.hash
来获取当前hash值，然后根据这个值来更新页面内容。
window.onhashchange = function() { const hash = location.hash.slice(1); // 去掉#号 updatePage(hash); }; function updatePage(hash) { // 根据hash值更新页面内容 const contentDiv = document.getElementById('content'); switch (hash) { case 'home': contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the home page.</p>'; break; case 'about': contentDiv.innerHTML = '<h1>About Page</h1><p>This is the about page.</p>'; break; case 'contact': contentDiv.innerHTML = '<h1>Contact Page</h1><p>Contact us here.</p>'; break; default: contentDiv.innerHTML = '<h1>404 Not Found</h1><p>Page not found.</p>'; } } // 页面加载时初始化 if (location.hash) { updatePage(location.hash.slice(1)); } else { location.hash = 'home'; // 默认显示home }
Hash路由的优点是兼容性好，即使在老版本的浏览器上也能正常工作。缺点是URL中会有一个
#
号，不太美观。
History API路由
History API路由使用
history.pushState
和
history.replaceState
来改变URL，而不会重新加载页面。同时，我们可以监听
window.onpopstate
事件，当用户点击浏览器的前进/后退按钮时，会触发这个事件。
function navigateTo(url) { history.pushState(null, null, url); updatePage(url); } window.onpopstate = function() { updatePage(location.pathname); }; function updatePage(url) { // 根据url更新页面内容 const contentDiv = document.getElementById('content'); switch (url) { case '/': contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the home page.</p>'; break; case '/about': contentDiv.innerHTML = '<h1>About Page</h1><p>This is the about page.</p>'; break; case '/contact': contentDiv.innerHTML = '<h1>Contact Page</h1><p>Contact us here.</p>'; break; default: contentDiv.innerHTML = '<h1>404 Not Found</h1><p>Page not found.</p>'; } } // 页面加载时初始化 updatePage(location.pathname); // 绑定链接点击事件 (假设有 <a href="/about">About</a> 这样的链接) document.addEventListener('click', function(event) { if (event.target.tagName === 'A') { event.preventDefault(); // 阻止默认的链接跳转 const url = event.target.getAttribute('href'); navigateTo(url); } });
History API路由的优点是URL更美观，没有
#
号。缺点是需要服务器端配置，确保在刷新页面时能正确处理路由。另外，兼容性方面，一些老版本的浏览器可能不支持History API。
如何处理404错误？
在Hash路由中，如果
location.hash
的值不在预定义的路由表中，可以直接显示一个404页面。例如，在上面的Hash路由示例中，
default
分支就处理了这种情况。
在使用History API路由时，服务器端也需要配置。当服务器收到一个不在预定义的路由表中的请求时，应该返回
index.html
页面，然后由前端JS路由来处理404错误。这是因为History API改变的是客户端的URL，服务器端并不知道这些URL。
如何实现路由的参数传递？
在Hash路由中，参数通常会附加在
#
后面的URL中，例如
#product/123
。我们可以通过解析
location.hash
来获取参数。
const hash = location.hash.slice(1); const parts = hash.split('/'); const route = parts[0]; // "product" const id = parts[1]; // "123"
在使用History API路由时，参数可以直接附加在URL中，例如
/product/123?color=red
。我们可以使用
URLSearchParams
来解析URL中的查询参数。
const urlParams = new URLSearchParams(location.search); const color = urlParams.get('color'); // "red"
如何避免页面刷新时路由失效？
在使用History API路由时，如果直接刷新页面，服务器可能会返回404错误。为了避免这种情况，需要在服务器端配置，将所有未知的路由都重定向到
index.html
。这样，前端JS路由就可以接管路由控制。例如，在Node.js中使用express框架，可以这样配置：
const express = require('express'); const path = require('path'); const app = express(); app.use(express.static('public')); // 假设静态文件在public目录下 app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, 'public', 'index.html')); }); app.listen(3000, () => { console.log('Server listening on port 3000'); });
这段代码会将所有GET请求都重定向到
index.html
，然后由前端JS路由来处理。
如何使用第三方库简化路由实现？
有很多优秀的第三方库可以简化JS路由的实现，例如
React Router
、
vue Router
、
angular Router
等。这些库提供了更高级的路由功能，例如嵌套路由、路由守卫、动态路由等。使用这些库可以大大提高开发效率。例如，使用React Router：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; function App() { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/users">Users</Link> </li> </ul> </nav> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> <Route path="/users" component={Users} /> </div> </Router> ); }
这段代码使用
BrowserRouter
来启用History API路由，并使用
Route
组件来定义路由规则。
Link
组件用于创建链接，点击链接时会自动更新URL并渲染对应的组件。
评论（已关闭）
评论已关闭