js route 实现

路由实现的基本方法

在JavaScript中实现路由功能通常涉及监听URL变化并根据路径渲染不同内容。常见方法包括原生API和第三方库。

监听URL变化

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

修改URL而不刷新页面

history.pushState({}, '', '/new-path');

基于Hash的路由实现

Hash路由利用URL中#后的部分实现无刷新跳转，兼容性较好。

初始化路由

function initRouter(routes) {
  window.addEventListener('hashchange', () => {
    const hash = window.location.hash.slice(1) || '/';
    const route = routes[hash] || routes['*'];
    route && route();
  });
}

定义路由表

const routes = {
  '/': () => renderHomePage(),
  '/about': () => renderAboutPage(),
  '*': () => renderNotFound()
};

基于History API的路由

现代SPA应用更推荐使用History API实现更干净的URL。

路由匹配逻辑

function matchRoute(path, routes) {
  const routeKeys = Object.keys(routes);
  const matchedKey = routeKeys.find(key => {
    if (key.includes(':')) {
      const regex = new RegExp(`^${key.replace(/:\w+/g, '([^/]+)')}$`);
      return regex.test(path);
    }
    return key === path;
  });
  return matchedKey ? routes[matchedKey] : routes['*'];
}

动态参数处理

'/user/:id': (params) => {
  console.log(`User ID: ${params.id}`);
}

第三方库集成

对于复杂应用，可考虑成熟的路由库：

React Router示例

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/users/:id" element={<UserProfile />} />
  </Routes>
</BrowserRouter>

Vue Router示例

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes
})

路由守卫实现

保护特定路由需要验证逻辑：

认证检查

function requireAuth(to, from, next) {
  if (isLoggedIn()) next();
  else next('/login');
}

路由配置

{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: requireAuth
}

性能优化技巧

代码分割

const LazyComponent = React.lazy(() => import('./LazyComponent'));

预加载策略

router.beforeEach((to, from, next) => {
  if (to.meta.preload) {
    preloadComponent(to.component);
  }
  next();
});