你有多久没有写过路由了？

在现代前端开发中，路由是相当重要的部分之一。

即使页面写的再好，如果没有路由绑定，那么页面就无法正常的被展示，就像是一本没有目录的书籍一般，用户没法自由的繁复的书页中在各个章节之间来回。

早期的路由，其实并不在前端处理，而是由后端服务器负责。

那时候，网页多是静态文件或通过服务端模板渲染生成的，每个 URL 对应一个具体的 HTML 文件或者后端路由。

例如访问 /about.html 就直接返回 about.html 文件，这就是典型的静态文件路由。

这种方式的优点是简单直接，但缺点也很显而易见，页面跳转意味着完整的页面刷新，用户不仅需要等待加载完成，还会丢失之前的操作状态，整个体验显得生硬而缓慢。

随着 AJAX 的兴起，开发者可以在页面进行局部刷新而不是整页刷新，局部刷新让网页行为更接近桌面应用，用户在操作中几乎感受不到延迟，同时也为单页应用（Single-Page Application，SPA）的发展奠定了基础。

随着现代前端框架逐渐出现，SPA 渐渐成为了主流。

简单来说，SPA 就是只有一个页面的网站，它只会加载一次。

而页面变化，数据更新这些原先需要重新加载的行为都是通过 JS 操作 DOM 来实现的。

但这使得传统的多页面应用（Multi Page Application，MPA）的功能无法使用，因为 SPA 它只有一个 HTML 文件，无法通过切换路由来重新加载新的 HTML 文件，也无法在前进，后退时响应不同的页面内容。

于是客户端路由应运而生，开发者在前端定义路由表，将 URL 与具体的组件进行绑定。

Vue Router 或 React Router 就可以根据路径动态渲染对应组件，页面切换不再依赖完整刷新，而是通过组件替换实现局部渲染。

这极大地提升了用户体验，也让前端应用更容易管理复杂的状态和交互。

虽然 SPA 体验较好，但因为只有一个 HTML 文件，页面变化都是通过 JS 进行的，使得 SEO 优化不好。因为搜索引擎的爬虫并不会执行 JS，使得爬取的网页内容就是一个空页面。

开发者需要引入了诸如 SSR（Server-Side Rendering，服务端渲染），SSG（Static Site Generation，静态站点生成）等技术，通过在服务器端生成完整 HTML 或在构建阶段生成静态页面，从而让爬虫能够直接抓取页面内容，提高 SEO 效果。

尽管现代的搜索引擎爬虫已经可以执行部分 JS 来抓取 SPA 动态渲染内容，但通常会有些许延迟，不如传统方式稳定。

于是，Next.js、Nuxt.js 等现代前端元框架应运而生。

所谓元框架，就是“框架之上的框架”，它们基于 React、Vue 等底层前端框架，进一步封装了路由、页面渲染、数据获取、构建优化等一整套前端开发方案，为开发者提供开箱即用的高层解决方案。

在元框架中，传统 SPA 的路由配置被简化或舍弃，取而代之的是约定式路由，每个页面对应一个文件，路由自动生成。

约定式路由是约定即配置这一思想的典范，简单来说，开发者按照框架约定的目录结构和命名规则创建文件，框架就会自动生成对应路由。例如：

开发者无需手动维护路由表，路由与页面天然绑定。这种模式不仅降低了开发成本，也显著提升了代码的可维护性和可读性。

回顾前端路由的发展历程，最初的路由完全依赖服务器，通过 URL 与文件的对应来提供页面。随着 AJAX 和单页应用的兴起，前端开始接管路由管理，从而显著提升了用户体验。

而在现代元框架中，我们似乎又回到了文件路由，看似回到原点，但其内核已然不同。