老实说，

什么是路由？路由就是用来描述服务器上的资源的方法。这篇文章聚焦前端路由，帮助你解决在单页应用中常见的「页面闪白」和「URL 不美观」等痛点。

一、为什么要理解前端路由？老实说，

痛点：在传统多页面应用里每次切换页面都要重新请求 HTML。网络波动时使用者会看到浏览器空白几秒才渲染完毕。

单页应用通过不刷新页面只切换组件来避免上述问题。

下面用原生 JS 演示一个最简版的「点击导航切换内容」的 SPA：

const content =;let navs = document.getElementsByTagName;说起来，Array.from.forEach =>
nav.addEventListener => {
document.getElementById.innerHTML = content;})
)，

这段代码实现了「组件切换」。但并未改变 URL，仍然缺少真正意义上的路由功能。

前端路由的主要作用

• 改变浏览器 URL
• 页面不刷新
• 根据 URL 找到对应组件并渲染

二、前端路由的主要流程

1. 修改浏览器 URL，但不刷新页面。
2. 监听 URL 的变化。
3. 根据映射表找到对应组件并渲染。说起来，

实现方式主要有两种：hash 路由和history 路由。

三、Hash 路由原理与实现

1️⃣ 什么是 Hash？

示例 URL：http://localhost/#/home 其中 #/home 即为 hash。 浏览器把 # 后面的字符串视为“锚点”，不会导致页面刷新。

2️⃣ Hash 的特点

• # 后面的内容变化不会刷新页面
• location.hash 可随时获取当前 hash 值
• hashchange 事件可监听 hash 变化。实现路由切换 *痛点解决：即使网络不稳，也不会出现空白页。

3️⃣ 实现步骤概览

1. 定义路由映射表：

const routes =;

点击导航改变 hash：

监听 hashchange 并渲染对应组件：

// 页面首次加载
window.addEventListener => renderView);// 监控后续切换
window.addEventListener => renderView);function renderView {
const path = hashVal.replace;说起来，const route = routes.find;说起来，if {
document.getElementById.innerHTML = route.component;}
}

P.S. 优缺点对比：

• 优点：
• ✔ 实现简单，几行代码即可上手；兼容性好，老旧浏览器也能跑；URL 改变不会刷新页面避免空白页。

缺点：


✖ URL 中会出现 “#”，视觉上不够美观；在 SEO 与部分 SED 场景下表现欠佳；无法直接使用浏览器前进/后退的完整历史栈。

四、History 路由原理与实现

a) History 对象简介

The History API 让我们在不刷新页面的情况下修改地址栏，同时保持浏览器的前进后退功能。它解决了「URL 不美观」还有「需要完整历史记录」的问题。

b) 常用方法 & 事件

• .pushState: 在历史记录栈添加新条目且不触发刷新。

This is a placeholder for answer

The answer should be an html snippet

User wants only html snippet

But we need to correct final answer:

We will output full HTML with proper structure and no extra text or placeholders

We must ensure no stray placeholders or broken tags appear in final output.

Now provide a clean version of answer that meets all se criteria.

Catching your pain point: 在传统多页应用里每次跳转都会重新请求 HTML，网络抖动时会出现“空白页”。而单页应用如果只切换组件却不更新地址栏，又会导致使用者无法使用浏览器前进/后退、书签失效等问题。下面通过对比 "hash 路由""history 路由"

---