js 实现路由
实现路由的基本概念
路由在前端开发中用于管理不同URL路径对应的页面或组件渲染。常见的实现方式包括原生JavaScript、第三方库（如React Router、Vue Router）或基于History API的自定义方案。
原生JavaScript实现路由
通过监听URL变化并动态加载内容，以下是基于hash和History API的两种实现方式：
基于Hash的路由
Hash路由依赖URL中的#部分，变化时触发hashchange事件，兼容性较好。
class HashRouter {
constructor() {
this.routes = {};
window.addEventListener('hashchange', this.handleHashChange.bind(this));
}
addRoute(path, callback) {
this.routes[path] = callback;
}
handleHashChange() {
const hash = window.location.hash.slice(1) || '/';
if (this.routes[hash]) {
this.routes[hash]();
}
}
}
// 使用示例
const router = new HashRouter();
router.addRoute('/', () => console.log('Home Page'));
router.addRoute('/about', () => console.log('About Page'));基于History API的路由
History API通过pushState和popstate实现无刷新URL变更，需服务器配合避免404。
class HistoryRouter {
constructor() {
this.routes = {};
window.addEventListener('popstate', this.handlePopState.bind(this));
}
addRoute(path, callback) {
this.routes[path] = callback;
}
navigate(path) {
history.pushState({}, '', path);
this.handlePopState();
}
handlePopState() {
const path = window.location.pathname;
if (this.routes[path]) {
this.routes[path]();
}
}
}
// 使用示例
const router = new HistoryRouter();
router.addRoute('/', () => console.log('Home Page'));
router.addRoute('/about', () => console.log('About Page'));
router.navigate('/about'); // 手动触发导航使用第三方库
若项目基于框架（如React/Vue），可直接使用成熟的路由库：
React Router示例
import { BrowserRouter, Route, Link } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</BrowserRouter>
);
}Vue Router示例
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = new VueRouter({
routes,
});
new Vue({
router,
}).$mount('#app');关键注意事项
- Hash路由：兼容性好但URL不美观，适合静态站点。
- History路由：需服务器配置重定向（如Nginx的
try_files），否则刷新会404。 - 动态路由：可通过参数匹配（如
/user/:id），需在回调中解析参数。 - 懒加载：结合动态导入（如
import()）优化性能。
通过以上方法，可根据项目需求选择合适的路由实现方案。
