编辑“︁前端路由实现”︁

{{Note|本文适用于需要理解前端路由实现原理的开发者，涵盖基础概念、实现方式及主流框架应用案例。}}

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

== 核心原理 ==
前端路由依赖以下两个浏览器API：
* '''History API'''：通过 <code>pushState</code>/<code>replaceState</code> 修改URL，通过 <code>popstate</code> 事件监听前进/后退操作。
* '''Hash Change'''：通过 <code>window.location.hash</code> 修改URL片段标识符，监听 <code>hashchange</code> 事件。

=== 两种模式对比 ===
{| class="wikitable"
|+ 路由模式对比
! 模式 !! 特点 !! 示例URL
|-
| '''History模式''' | 需要服务器支持，URL更简洁 | <code>example.com/user/1</code>
|-
| '''Hash模式''' | 兼容性更好，无需服务器配置 | <code>example.com/#/user/1</code>
|}

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

=== Hash模式 ===
<syntaxhighlight lang="javascript">
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>');
</syntaxhighlight>

=== History模式 ===
<syntaxhighlight lang="javascript">
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();
  }
}
</syntaxhighlight>

== 主流框架实现 ==
=== React Router示例 ===
<syntaxhighlight lang="jsx">
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>
  );
}
</syntaxhighlight>

=== Vue Router示例 ===
<syntaxhighlight lang="javascript">
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')
</syntaxhighlight>

== 路由守卫 ==
路由守卫用于控制导航权限，典型场景包括：
* 登录验证
* 页面权限控制
* 数据预加载

=== Vue Router守卫示例 ===
<syntaxhighlight lang="javascript">
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});
</syntaxhighlight>

== 性能优化 ==
* '''代码分割'''：结合Webpack动态导入
* '''预加载'''：使用 <code>link rel="prefetch"</code>
* '''路由懒加载'''（React示例）：
<syntaxhighlight lang="javascript">
const LazyComponent = React.lazy(() => import('./LazyComponent'));
</syntaxhighlight>

== 状态管理集成 ==
前端路由常与状态管理库（如Redux/Vuex）结合：
<mermaid>
graph LR
  A[URL Change] --> B(Router)
  B --> C[Update Store]
  C --> D[Render View]
</mermaid>

== 常见问题 ==
{{Warning|1=History模式需要服务器配置，否则刷新会导致404错误}}
* '''解决方案'''：配置服务器所有路径返回<code>index.html</code>
* '''Nginx示例'''：
<syntaxhighlight lang="nginx">
location / {
  try_files $uri $uri/ /index.html;
}
</syntaxhighlight>

== 数学表达 ==
路由匹配算法可抽象为路径参数解析：
<math>
\forall p \in Paths, \exists f(p) \rightarrow Component
</math>

== 进阶主题 ==
* '''嵌套路由'''：子路由的层级匹配
* '''动态路由'''：<code>/user/:id</code> 参数解析
* '''SSR路由处理'''：服务端与客户端路由同步

{{SeeAlso|相关概念：单页应用(SPA)、History API、动态导入}}

[[Category:计算机科学]]
[[Category:面试技巧]]
[[Category:前端框架]]