什么是前端路由？
前端路由是单页应用（SPA）中的核心技术，它允许应用在不刷新整个页面的情况下，根据 URL 的变化来切换视图组件。这种技术使得用户体验更加流畅，减少了页面加载时间，同时保持了 URL 的可分享性和浏览器历史记录的可用性。
前端路由的主要作用：
- 无刷新页面切换：在不重新加载整个页面的情况下更新视图内容
- 状态保持：切换页面时保持应用状态
- 提升用户体验：减少页面加载时间，提供更流畅的交互体验
- 减轻服务器压力：减少对服务器的请求次数
前端路由的实现方式
目前主流的前端路由实现方式有两种：基于 URL 哈希（Hash 模式）和基于 HTML5 History API（History 模式）。下面我们将通过简单的代码示例来理解这两种模式的核心原理。
Hash 模式
哈希模式是前端路由最早的实现方式，它利用 URL 中的哈希值（#后面的部分）来模拟不同的路径。当哈希值变化时，页面不会重新加载，但可以通过监听hashchange事件来检测变化并更新视图。
特点：
- 兼容性好，支持所有浏览器
- URL 中包含#，不太美观
- 服务器无需特殊配置
- 不支持 SEO 优化
实现原理：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<a href="#/home">home</a>
<a href="#/about">about</a>
<a href="#/contact">contact</a>
<div id="app">
</div>
<script>
const routes = {
"/home": {
template: "<h2>首页</h2><p>这是首页内容</p>",
},
"/about": {
template: "<h2>关于我们</h2><p>这是关于我们的内容</p>",
},
"/contact": {
template: "<h2>联系我们</h2><p>这是联系我们的内容</p>",
},
"/404": {
template: "<h2>404 Not Found</h2><p>页面不存在</p>",
},
};
function render() {
const hash = location.hash || "#/home";
const path = hash.slice(1);
const content = routes[path] || routes["/404"];
document.getElementById("app").innerHTML = content.template;
}
window.addEventListener("hashchange", render);
render();
</script>
</body>
</html>
|
在线 demo
History 模式
History 模式基于 HTML5 提供的 History API（主要是 pushState 和 replaceState 方法），可以在不刷新页面的情况下修改浏览器的 URL。这种模式下的 URL 更加美观，没有#符号，看起来就像普通的 URL 一样。
特点：
- URL 更加美观，没有#符号
- 可以更好地支持 SEO
- 需要服务器配置支持（否则刷新页面会 404）
- 对低版本浏览器兼容性较差
实现原理：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<a href="/home">home</a>
<a href="/about">about</a>
<a href="/contact">contact</a>
<div id="app">
</div>
<script>
const routes = {
"/home": {
template: "<h2>首页</h2><p>这是首页内容</p>",
},
"/about": {
template: "<h2>关于我们</h2><p>这是关于我们的内容</p>",
},
"/contact": {
template: "<h2>联系我们</h2><p>这是联系我们的内容</p>",
},
"/404": {
template: "<h2>404 Not Found</h2><p>页面不存在</p>",
},
};
const links = document.querySelectorAll("a");
links.forEach((link) => {
link.addEventListener("click", (e) => {
e.preventDefault();
const path = e.target.pathname;
navigate(path);
});
});
function navigate(path) {
history.pushState({ path }, "", path);
render(path);
}
function render(path) {
const content = routes[path] || routes["/404"];
document.querySelector("#app").innerHTML = content.template;
}
window.addEventListener("popstate", (e) => {
render(e.state.path);
});
render("/home");
</script>
</body>
</html>
|
在线演示
两种模式的对比
| 特性 |
Hash 模式 |
History 模式 |
| URL 格式 |
包含#符号 |
普通 URL 格式，更美观 |
| 浏览器兼容性 |
所有浏览器 |
仅 HTML5 支持的浏览器 |
| 服务器配置 |
无需特殊配置 |
需要配置所有路由都指向 index.html |
| SEO 友好度 |
较差，搜索引擎一般忽略#后内容 |
较好，可被搜索引擎正常抓取 |
| 刷新页面 |
可以正常工作 |
没有适当服务器配置会返回 404 |
总结
前端路由是现代单页应用不可或缺的一部分，它使得应用能够在不刷新页面的情况下实现视图切换，提供更好的用户体验。Hash 模式和 History 模式各有优缺点，可以根据项目需求选择合适的模式。
无论使用哪种模式，理解其背后的原理对于解决路由相关问题和优化应用性能都非常重要。本文通过简单的代码示例展示了两种模式的核心实现原理，希望能帮助读者更好地理解前端路由的工作方式。
