当前位置：首页 > JavaScript

js实现路由

2026-04-03 21:25:48JavaScript

js实现路由的方法

使用原生JavaScript实现路由

通过监听hashchange事件或使用History API可以实现前端路由。以下是两种常见方式：

// Hash路由实现
window.addEventListener('hashchange', function() {
  const hash = window.location.hash.slice(1);
  handleRoute(hash);
});

function handleRoute(path) {
  const content = document.getElementById('content');
  switch(path) {
    case '/home':
      content.innerHTML = 'Home Page';
      break;
    case '/about':
      content.innerHTML = 'About Page';
      break;
    default:
      content.innerHTML = '404 Not Found';
  }
}

使用History API实现路由

// 监听popstate事件
window.addEventListener('popstate', function(e) {
  const path = window.location.pathname;
  handleRoute(path);
});

// 导航函数
function navigate(path) {
  window.history.pushState({}, '', path);
  handleRoute(path);
}

// 使用示例
document.getElementById('home-link').addEventListener('click', function(e) {
  e.preventDefault();
  navigate('/home');
});

使用第三方库实现路由

流行的JavaScript路由库包括：

React Router：适用于React应用
Vue Router：适用于Vue应用
Page.js：轻量级路由库

以React Router为例：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

路由参数处理

动态路由参数可以通过以下方式获取：

// React Router示例
<Route path="/user/:id" component={User} />

// 在组件中获取
function User({ match }) {
  return <div>User ID: {match.params.id}</div>;
}

路由守卫实现

可以通过高阶组件或路由钩子实现权限控制：

js实现路由

// React Router守卫示例
const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
  )} />
);

这些方法覆盖了从原生实现到框架集成的各种路由方案，可根据项目需求选择合适的方式。