当前位置：首页 > JavaScript

js 实现路由

2026-04-06 23:50:54JavaScript

实现路由的基本概念

路由在前端开发中用于管理不同URL路径对应的页面或组件渲染。常见的实现方式包括原生JavaScript、第三方库（如React Router、Vue Router）或基于History API的自定义方案。

原生JavaScript实现路由

通过监听URL变化并动态加载内容，以下是基于hash和History API的两种实现方式：

js 实现路由

基于Hash的路由

Hash路由依赖URL中的#部分，变化时触发hashchange事件，兼容性较好。

js 实现路由

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');