React/Vue 框架到底是什么里的计数器只有一个页面，但凡真实一点的网站都不止一个页面。就拿你正在看的这个网站来说，题目列表是一个页面，点进去看某道题的详情又是另一个页面。
那么 React 应用是怎么从一个页面切到另一个页面的？
你可能觉得这还不简单，点个链接跳过去呗。但现代前端的做法和你想的不太一样，中间有个叫路由（Router）的东西在起作用。
本文就动手做一个简单的迷你版算法题库：一个列表页列出所有题目，点其中一道题，进入这道题的详情页，看到题目描述和参考代码。
本质上就是我们这个网站的题库页面，只不过题目数据先写死在前端代码里，样式也简单一些，我们这篇教程聚焦讲解 前端路由 的原理。
传统网站怎么切换页面
在没有前端框架的年代，每个页面都会对应一个单独的 html 文件，html 文件中引用对应的 css 和 js 文件。
也就是说，网站有几个页面，服务器上就放几个 HTML 文件，比如这样：
website/
├── index.html # 题目列表
├── problem-1.html # 第一题
└── problem-2.html # 第二题html 页面之间用 <a> 标签连起来：
<a href="/problem-1.html">1. 二分搜索</a>用户点这个链接，浏览器的做法很粗暴：把当前页面整个丢掉，向服务器请求 problem-1.html，等 html 文件下载完再从头加载 CSS/JS 等资源，渲染页面内容。
这个过程中，可能会下载重复的资源，浪费网络带宽，而且页面会白屏一段时间，用户体验比较差。
因为浏览器相当于是开了一个新页面，要重新请求并渲染整个 HTML，哪怕是重复的 CSS/JS 资源文件，也要重复下载。
网速快的时候还行，网速稍微慢一些的话，用户点一下要干等好几秒，非常影响体验。
React 项目就不一样了。前端开发常用的工具里我们跑 npm run build，产出的 dist 目录里只有一个 HTML 文件。
既然只有一个 HTML 文件，那所谓的「好几个页面」当然不是好几个文件，而是同一个页面里，用 JavaScript 把内容换掉。
这就是单页应用（SPA，Single Page Application）：整个网站只加载一次 HTML，之后的页面切换全部由 JavaScript 在浏览器里完成，不再向服务器要新的 HTML 文件。
好处很直接，切换页面不白闪，导航栏这些公共部分不用重新渲染，用起来接近手机 App 的顺滑感。