前端路由的实现与应用

问题

什么是前端路由？什么时候适合使用？有哪些优缺点？

解答

什么是前端路由

前端路由是指由前端负责根据 URL 变化来渲染不同的页面内容，而不是像传统方式那样由服务端根据 URL 返回不同的 HTML 页面。

适用场景

前端路由主要用于单页面应用（SPA），适合以下场景：

• 页面整体结构保持不变，只需要更新局部内容
• 需要频繁切换视图，但不希望重新加载整个页面
• 希望提供流畅的用户交互体验

优缺点

优点：

用户体验更好，页面切换时不需要从服务器重新加载全部资源，响应速度快。

缺点：

• 单页面应用无法记住页面滚动位置
• 前进、后退时需要额外处理才能恢复滚动状态
• 首次加载可能较慢
• SEO 相对传统多页面应用更复杂

实现方式

前端路由有两种主要实现方式：

1. Hash 模式

通过监听 URL 中 hash（#）的变化来切换页面：

window.addEventListener('hashchange', () => {
  const hash = window.location.hash;
  // 根据 hash 渲染对应内容
});

2. History 模式

使用 HTML5 History API 的 pushState 和 replaceState：

// 改变 URL 但不刷新页面
history.pushState({ page: 1 }, 'title', '/page1');

// 监听浏览器前进后退
window.addEventListener('popstate', (event) => {
  // 根据 state 渲染对应内容
});

关键点

• 前端路由由前端控制 URL 与页面内容的映射关系，无需服务端参与
• 适用于单页面应用，可以提升页面切换的流畅度
• Hash 模式兼容性好，History 模式 URL 更美观但需要服务端配合
• 需要注意滚动位置恢复、SEO 优化等问题