前端路由和后端路由我面试过不少前端新人一半以上被问到这两者的区别时会含糊其辞。其实不能怪大家基础不牢这俩名字里都有“路由”两个字但负责的事情完全不是一个层级。今天不整虚的直接把前端路由和后端路由掰开揉碎讲清楚它们各自的职责、工作过程和协作关系。看完这篇你不仅能给别人讲明白以后真遇到相关报错也能快速定位问题方向。1. 路由的本质一个地址对应一份资源先别急着区别前端还是后端得先搞清楚“路由”这个词到底在说什么。生活中去商场找一家店你得先知道它在几楼几号铺顺着指示牌走。计算机世界里的路由也是这样客户端发出一个请求地址服务端或者前端代码根据这个地址来决定返回什么内容。换句话说路由就是“地址”到“资源”的映射规则。这里有个关键点需要新人先记住——映射发生的位置不同才是前端路由与后端路由最本质的区别。后端路由的映射发生在服务器端一个URL对应一个后端处理函数服务器拿到URL后匹配函数生成HTML或者JSON返回给浏览器。而前端路由的映射发生在浏览器端URL变化后由前端JavaScript拦截处理动态切换页面上渲染的组件或视图不再重新向服务器请求HTML。我刚带团队时经常给新人打这样一个比方后端路由像是去食堂打饭你走到哪个窗口师傅就给你打哪个菜。窗口就是服务器师傅就是后端路由处理函数。前端路由像是点外卖时切换App里的页面你滑动切换页签手机屏幕显示的内容变了但你人没出门也没跟商家重新下单一趟。这个类比能解决一大半的混淆问题。后面所有技术细节都是围绕“谁在响应这次URL变化”来展开的。1.1 新人最容易搞混的三个瞬间结合我这些年答疑和带新人的经验最容易搞混的场景基本就三种第一种是在写单页应用SPA时看到地址栏里URL变了下意识以为是后端在做页面跳转。其实页面没有整刷只是前端路由接管了URL变化。第二种是刚接触Node.js写接口时总觉着前端也能“自己定义URL”于是把接口路径也顺手塞到前端路由表里导致前后端路径对不上请求全部404。第三种更常见是在讨论“刷新页面”时。后端路由怎么刷都不会出问题因为服务器每次都能找到对应资源。但前端路由里的History模式一刷新就白屏或者404很多人想不通为什么。这三个瞬间不是你一个人遇到过几乎所有人都会踩一圈。接下去逐层拆开讲你就明白这些现象背后的原理了。2. 后端路由所有路由的起点一切由服务器说了算后端路由是互联网早期的正统方案也是现在后端服务里最常见的路由形式。理解清楚它你再看前端路由会非常轻松。2.1 后端路由的执行链路当浏览器地址栏输入一个网址并按下回车浏览器会把请求发到服务器。服务器内部按顺序做三层事先解析URL路径再匹配路由表最后执行对应的处理函数。这段链路里URL路径是入参路由表是规则集处理函数是执行逻辑。三者凑齐一次后端路由就完成了。用生活化的方式理解路由表就是一本菜单URL就是菜名后端处理函数就是后厨做菜的人。有一件事新人要注意后端路由的响应可以是一个完整的HTML页面也可以是一段JSON数据。在老式多页应用MPA里后端路由返回整页HTML所以每跳转一次页面浏览器都会刷新而在现代前后端分离架构里后端路由更多返回JSON数据前端拿到数据自己更新页面。2.2 一段后端路由代码看清全貌我们用Node.js加Express框架写一个最简后端路由这是很多人入门服务端的第一站const express require(express); const app express(); // 路由1访问首页返回完整页面 app.get(/, (req, res) { res.send(h1这是首页/h1); }); // 路由2访问用户列表接口返回JSON数据 app.get(/api/users, (req, res) { res.json([{ id: 1, name: 张三 }, { id: 2, name: 李四 }]); }); // 路由3带路径参数的动态路由 app.get(/api/users/:id, (req, res) { const userId req.params.id; res.json({ id: userId, name: 用户 userId }); }); app.listen(3000, () console.log(服务已启动端口3000));注意这三条路由的差异第一条返回的是完整HTML第二条返回的是JSON数据第三条的:id是动态参数可以匹配任意用户ID。这里有一个新手常犯的错——动态路由参数没有做类型或格式校验用户传入非数字ID时服务端直接报错。稳妥的做法是先解析判断再决定是否继续至少加一层Number.isInteger之类的检查。2.3 后端路由的优势和短板优势非常明显第一对搜索引擎友好。服务器返回的是完整HTML爬虫不需要执行JavaScript也能抓到所有内容SEO天然有优势。这也是为什么很多内容型站点虽然用了前端框架但仍要配合服务端渲染SSR的原因。第二页面刷新无压力。用户刷新浏览器服务器按URL重新匹配一次路由资源永远存在不会出现“刷新后的页面没了”这种情况。第三数据安全性高。路由处理逻辑和数据库访问都在服务器内部前端拿到的只是服务器允许返回的数据。短板也很明显最痛的一点是每次切换页面都要刷新。哪怕页面里只改了一个按钮文字浏览器也要重新拉取整个HTML文档。这样用户体验差、服务器压力大还特别费流量。早年的网站基本都是这个模式现在你点开一些老旧系统依然能感受到这种页面的“迟钝感”。另一个短板是前后端耦合度高。URL结构和页面展示逻辑往往绑在一起后端的路由规则一旦确定前端页面结构也就定死了。改一个URL路径前后端得一起改。3. 前端路由单页应用SPA的灵魂前端路由的诞生本质上是因为后端路由“每次都要刷新页面”的体验太割裂了。前端路由要把“URL变化”和“页面内容更新”这两件事接起来URL变了但不发起网络请求只是局部替换页面内容。3.1 前端路由的核心思路不刷新页面也能变内容 前端路由 vs 后端路由：映射位置、工作机制与协作关系
前端路由和后端路由我面试过不少前端新人一半以上被问到这两者的区别时会含糊其辞。其实不能怪大家基础不牢这俩名字里都有“路由”两个字但负责的事情完全不是一个层级。今天不整虚的直接把前端路由和后端路由掰开揉碎讲清楚它们各自的职责、工作过程和协作关系。看完这篇你不仅能给别人讲明白以后真遇到相关报错也能快速定位问题方向。1. 路由的本质一个地址对应一份资源先别急着区别前端还是后端得先搞清楚“路由”这个词到底在说什么。生活中去商场找一家店你得先知道它在几楼几号铺顺着指示牌走。计算机世界里的路由也是这样客户端发出一个请求地址服务端或者前端代码根据这个地址来决定返回什么内容。换句话说路由就是“地址”到“资源”的映射规则。这里有个关键点需要新人先记住——映射发生的位置不同才是前端路由与后端路由最本质的区别。后端路由的映射发生在服务器端一个URL对应一个后端处理函数服务器拿到URL后匹配函数生成HTML或者JSON返回给浏览器。而前端路由的映射发生在浏览器端URL变化后由前端JavaScript拦截处理动态切换页面上渲染的组件或视图不再重新向服务器请求HTML。我刚带团队时经常给新人打这样一个比方后端路由像是去食堂打饭你走到哪个窗口师傅就给你打哪个菜。窗口就是服务器师傅就是后端路由处理函数。前端路由像是点外卖时切换App里的页面你滑动切换页签手机屏幕显示的内容变了但你人没出门也没跟商家重新下单一趟。这个类比能解决一大半的混淆问题。后面所有技术细节都是围绕“谁在响应这次URL变化”来展开的。1.1 新人最容易搞混的三个瞬间结合我这些年答疑和带新人的经验最容易搞混的场景基本就三种第一种是在写单页应用SPA时看到地址栏里URL变了下意识以为是后端在做页面跳转。其实页面没有整刷只是前端路由接管了URL变化。第二种是刚接触Node.js写接口时总觉着前端也能“自己定义URL”于是把接口路径也顺手塞到前端路由表里导致前后端路径对不上请求全部404。第三种更常见是在讨论“刷新页面”时。后端路由怎么刷都不会出问题因为服务器每次都能找到对应资源。但前端路由里的History模式一刷新就白屏或者404很多人想不通为什么。这三个瞬间不是你一个人遇到过几乎所有人都会踩一圈。接下去逐层拆开讲你就明白这些现象背后的原理了。2. 后端路由所有路由的起点一切由服务器说了算后端路由是互联网早期的正统方案也是现在后端服务里最常见的路由形式。理解清楚它你再看前端路由会非常轻松。2.1 后端路由的执行链路当浏览器地址栏输入一个网址并按下回车浏览器会把请求发到服务器。服务器内部按顺序做三层事先解析URL路径再匹配路由表最后执行对应的处理函数。这段链路里URL路径是入参路由表是规则集处理函数是执行逻辑。三者凑齐一次后端路由就完成了。用生活化的方式理解路由表就是一本菜单URL就是菜名后端处理函数就是后厨做菜的人。有一件事新人要注意后端路由的响应可以是一个完整的HTML页面也可以是一段JSON数据。在老式多页应用MPA里后端路由返回整页HTML所以每跳转一次页面浏览器都会刷新而在现代前后端分离架构里后端路由更多返回JSON数据前端拿到数据自己更新页面。2.2 一段后端路由代码看清全貌我们用Node.js加Express框架写一个最简后端路由这是很多人入门服务端的第一站const express require(express); const app express(); // 路由1访问首页返回完整页面 app.get(/, (req, res) { res.send(h1这是首页/h1); }); // 路由2访问用户列表接口返回JSON数据 app.get(/api/users, (req, res) { res.json([{ id: 1, name: 张三 }, { id: 2, name: 李四 }]); }); // 路由3带路径参数的动态路由 app.get(/api/users/:id, (req, res) { const userId req.params.id; res.json({ id: userId, name: 用户 userId }); }); app.listen(3000, () console.log(服务已启动端口3000));注意这三条路由的差异第一条返回的是完整HTML第二条返回的是JSON数据第三条的:id是动态参数可以匹配任意用户ID。这里有一个新手常犯的错——动态路由参数没有做类型或格式校验用户传入非数字ID时服务端直接报错。稳妥的做法是先解析判断再决定是否继续至少加一层Number.isInteger之类的检查。2.3 后端路由的优势和短板优势非常明显第一对搜索引擎友好。服务器返回的是完整HTML爬虫不需要执行JavaScript也能抓到所有内容SEO天然有优势。这也是为什么很多内容型站点虽然用了前端框架但仍要配合服务端渲染SSR的原因。第二页面刷新无压力。用户刷新浏览器服务器按URL重新匹配一次路由资源永远存在不会出现“刷新后的页面没了”这种情况。第三数据安全性高。路由处理逻辑和数据库访问都在服务器内部前端拿到的只是服务器允许返回的数据。短板也很明显最痛的一点是每次切换页面都要刷新。哪怕页面里只改了一个按钮文字浏览器也要重新拉取整个HTML文档。这样用户体验差、服务器压力大还特别费流量。早年的网站基本都是这个模式现在你点开一些老旧系统依然能感受到这种页面的“迟钝感”。另一个短板是前后端耦合度高。URL结构和页面展示逻辑往往绑在一起后端的路由规则一旦确定前端页面结构也就定死了。改一个URL路径前后端得一起改。3. 前端路由单页应用SPA的灵魂前端路由的诞生本质上是因为后端路由“每次都要刷新页面”的体验太割裂了。前端路由要把“URL变化”和“页面内容更新”这两件事接起来URL变了但不发起网络请求只是局部替换页面内容。3.1 前端路由的核心思路不刷新页面也能变内容