前端路由实现[编辑 | 编辑源代码]

前端路由（Frontend Routing）是现代单页应用（SPA）的核心机制，它通过监听URL变化，在不刷新页面的情况下动态渲染对应内容。与后端路由不同，前端路由完全由JavaScript控制，实现更快的页面切换和更流畅的用户体验。

核心原理[编辑 | 编辑源代码]

前端路由依赖以下两个浏览器API：

History API：通过 pushState/replaceState 修改URL，通过 popstate 事件监听前进/后退操作。
Hash Change：通过 window.location.hash 修改URL片段标识符，监听 hashchange 事件。

两种模式对比[编辑 | 编辑源代码]

路由模式对比
模式	特点	示例URL
需要服务器支持，URL更简洁 \| `example.com/user/1`
兼容性更好，无需服务器配置 \| `example.com/#/user/1`

原生JavaScript实现[编辑 | 编辑源代码]

以下是两种模式的纯JavaScript实现示例：

Hash模式[编辑 | 编辑源代码]

class HashRouter {
  constructor() {
    this.routes = {};
    window.addEventListener('hashchange', this.load.bind(this));
  }

  addRoute(path, callback) {
    this.routes[path] = callback;
  }

  load() {
    const hash = window.location.hash.slice(1) || '/';
    const callback = this.routes[hash];
    callback && callback();
  }
}

// 使用示例
const router = new HashRouter();
router.addRoute('/home', () => document.body.innerHTML = '<h1>Home Page</h1>');
router.addRoute('/about', () => document.body.innerHTML = '<h1>About Page</h1>');

History模式[编辑 | 编辑源代码]

class HistoryRouter {
  constructor() {
    this.routes = {};
    window.addEventListener('popstate', this.load.bind(this));
  }

  navigate(path, data = {}) {
    history.pushState(data, '', path);
    this.load();
  }

  addRoute(path, callback) {
    this.routes[path] = callback;
  }

  load() {
    const path = window.location.pathname;
    const callback = this.routes[path];
    callback && callback();
  }
}

主流框架实现[编辑 | 编辑源代码]

React Router示例[编辑 | 编辑源代码]

import { BrowserRouter, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <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')

路由守卫[编辑 | 编辑源代码]

路由守卫用于控制导航权限，典型场景包括：

登录验证
页面权限控制
数据预加载

Vue Router守卫示例[编辑 | 编辑源代码]

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

性能优化[编辑 | 编辑源代码]

代码分割：结合Webpack动态导入
预加载：使用 link rel="prefetch"
路由懒加载（React示例）：

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

状态管理集成[编辑 | 编辑源代码]

前端路由常与状态管理库（如Redux/Vuex）结合：

常见问题[编辑 | 编辑源代码]

页面模块:Message box/ambox.css没有内容。

解决方案：配置服务器所有路径返回index.html
Nginx示例：

location / {
  try_files $uri $uri/ /index.html;
}

数学表达[编辑 | 编辑源代码]

路由匹配算法可抽象为路径参数解析： $\forall p \in P a t h s, \exists f (p) \to C o m p o n e n t$

进阶主题[编辑 | 编辑源代码]

嵌套路由：子路由的层级匹配
动态路由：/user/:id 参数解析
SSR路由处理：服务端与客户端路由同步

模板:SeeAlso