当前位置：首页 > JavaScript

js route 实现

2026-03-14 17:06:06JavaScript

路由实现的基本方法

在 JavaScript 中实现路由通常有两种方式：基于哈希（Hash）的路由和基于历史 API（History API）的路由。以下是具体实现方法：

基于哈希的路由

哈希路由利用 URL 中的哈希部分（#）来实现无刷新页面跳转。当哈希变化时，触发 hashchange 事件。

window.addEventListener('hashchange', function() {
  const hash = window.location.hash.substring(1);
  handleRoute(hash);
});

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

基于 History API 的路由

History API 提供了 pushState 和 popstate 方法，允许更干净的 URL 而不需要哈希符号。

window.addEventListener('popstate', function() {
  const path = window.location.pathname;
  handleRoute(path);
});

function navigateTo(path) {
  window.history.pushState({}, '', path);
  handleRoute(path);
}

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

动态路由的实现

对于需要处理动态参数的路由（如 /user/:id），可以使用正则表达式匹配。

function handleDynamicRoute(path) {
  const userPattern = /^\/user\/(\d+)$/;
  const match = path.match(userPattern);

  if (match) {
    const userId = match[1];
    document.getElementById('content').innerHTML = `<h1>User ID: ${userId}</h1>`;
    return;
  }

  // 其他路由处理...
}

路由库的使用

对于更复杂的应用，可以使用现有的路由库如 React Router、Vue Router 或 Page.js：

// 使用 Page.js 的示例
page('/home', function() {
  document.getElementById('content').innerHTML = '<h1>Home Page</h1>';
});

page('/about', function() {
  document.getElementById('content').innerHTML = '<h1>About Page</h1>';
});

page('*', function() {
  document.getElementById('content').innerHTML = '<h1>404 Not Found</h1>';
});

page();

路由守卫的实现

路由守卫用于在路由切换前进行权限检查或其他操作。

js route 实现

function checkAuth(ctx, next) {
  const isAuthenticated = /* 检查用户是否登录 */;
  if (!isAuthenticated && ctx.path !== '/login') {
    next('/login');
  } else {
    next();
  }
}

page('/dashboard', checkAuth, function() {
  document.getElementById('content').innerHTML = '<h1>Dashboard</h1>';
});

这些方法涵盖了从基础到进阶的路由实现技术，可以根据项目需求选择合适的方案。