前端路由

一句话：单页应用里"切换页面不刷新整个网页"的机制，通过JS控制URL和显示内容的对应关系，而不是每次都向服务器请求新页面。

它是什么

传统网站每切换一个页面就要向服务器请求一个新的HTML文件；单页应用（SPA）用前端路由技术，在浏览器里直接切换显示内容、更新URL，不用整页刷新，体验更流畅，但也带来了"直接访问二级页面/刷新页面"时需要服务器配合的问题（见deployment-404）。

适合干什么

• React/Vue等框架搭建的单页应用需要多页面切换
• 需要流畅的页面切换体验（不闪烁刷新）

不适合干什么

• 纯静态多页网站，每个页面本身就是独立HTML文件，不需要前端路由这套机制

普通人怎么用

React用React Router、Vue用Vue Router是最主流的选择，装好对应的库，按官方文档配置几个基础路由（路径对应哪个页面组件）就能跑起来。

进阶用户怎么用

理解history模式和hash模式的区别：history模式URL更美观但需要服务器配合处理路由（否则刷新页面404），hash模式（URL带#号）不需要服务器配合但URL不够美观；路由懒加载（按需加载页面代码）能优化首屏加载速度。

常见误区

• 配置好前端路由本地开发一切正常，部署上线后刷新非首页报404，忘记了生产环境需要服务器配合处理路由转发（见deployment-404）
• 把所有页面代码打包在一起导致首屏加载慢，应该用路由懒加载按需加载

和相似工具的区别

• 和后端路由（服务器根据URL返回不同内容）的区别：前端路由完全在浏览器里处理，速度快但需要额外配置部署环境；传统后端路由每次都是完整的服务器请求

入门步骤

• 安装对应框架的路由库
• 配置路径和页面组件的对应关系
• 部署时记得配置服务器支持SPA路由（否则刷新404）