前端路由
Client-side Routing
中级通用前端路由（Client-side Routing）是由浏览器中的代码根据网址决定显示哪个页面的机制。它让网站切换页面时不必每次都向服务器请求整页，也能让用户通过网址直达某个页面，例如直接打开后台的订单详情。
你可能会说：「我想让后台切换页面时不整页刷新，而且复制订单详情的网址给同事后，他也能直接打开。」
动手看看后台订单页切换
用「模拟点击页面链接」切换列表和详情，观察网址、页面内容与请求记录一起变化；也可以悬停或用 Tab 聚焦左侧入口。
前端路由由浏览器里的代码按网址换页面。这里可以请求订单数据，但切换时不必重新下载整页 HTML。
详情页有独立网址，所以别人也能直接打开 /admin/orders/2048；首次直达时仍需加载网站，前端路由省的是站内切换时反复请求整页。
要点前端路由怎样把网址变成页面？
- 1
网址路径对应页面内容
你打开后台的订单列表和某笔订单详情时，前端路由会读取当前网址，把不同路径匹配到对应的页面组件。这样即使共用一套应用界面，两个页面仍有各自可分享的网址。
- 2
切换页面同步更新网址
点击站内导航后，路由可以更新浏览器地址并显示新页面，而不重新加载整份网页。因为网址也变了，用户通常还能用浏览器的返回、前进按钮回到刚才看的页面。
- 3
直接访问还要服务器配合
站内点击能打开详情页，不代表刷新详情页网址也能打开。刷新或粘贴网址时，请求会先到服务器；服务器需要返回应用入口，再由前端识别路径，否则可能出现找不到页面。
容易混淆的地方
它和服务端路由的区别在于：前端路由主要由浏览器中的代码决定显示什么，服务端路由由服务器处理请求并决定返回什么；两者可以配合使用。它也不等于锚点跳转：锚点通常只是把你带到同一页的某个位置，不是在应用中切换到另一个页面。
什么时候用
适合用
- 做一个有订单列表、订单详情和设置页的管理后台，希望切换时保留应用界面，并让每页有独立网址。
- 做 AI 工具时，想让用户复制某次对话的网址发给同事，打开后直接进入对应的对话页面。
- 做多页面的产品原型，想验证导航、浏览器返回和直接打开子页面是否符合实际使用习惯。
不适合用
- 网站只有一篇长介绍，点击目录只是滚动到本页不同段落；用锚点链接就能解决。
- 点击一个控件只是在当前页面展开详情或切换局部内容，不需要独立网址；用组件状态更直接。
- 网站只有少量彼此独立的静态页面，而且接受每次跳转都加载新页面；普通链接和多页网站就够了。
练一练选一个答案，看看解释
你给管理后台加了前端路由：站内点击能进入「/orders/42」，但复制这个网址到新标签页却显示服务器的 404。接下来怎么处理最贴近问题根源？
让 AI 帮你做复制给 AI Agent 直接用
请为这个管理后台实现前端路由：订单列表用 /orders，详情用 /orders/:id，设置页用 /settings。站内导航切换时更新网址并支持浏览器返回；检查直接打开或刷新子页面时的服务器回退配置，并给出验证步骤。