ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、视频、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
## 前端路由和后端路由的区别 ### 后端路由 GET 或 POST 请求时,服务端会维护一个正则配置表,当请求匹配到某一条具体 URL 路径时,就会分发到不同的 Controller,处理完成后,将 HTML 或数据返回给前端,这样就完成了一次 IO 交互操作 ![](https://img.kancloud.cn/fa/5d/fa5dde6b64ffad70213d514156bd2cb3_1356x662.png) ### 前端路由 - SPA 页面输入 url => js 解析地址,找到对应的页面 => 渲染页面 优点:不会往后端发请求 ## hash & history ### hash * `#` 后面的就是 hash的内容 * 可以通过 location.hash 拿到 * onhashchange 监听hash的改变 ![](https://img.kancloud.cn/de/0c/de0c31c2ca21bb32bb1cc8a17aa5d1b4_1651x774.png) ![](https://img.kancloud.cn/c2/c1/c2c17d1c264acd295e6ea24fc6b59db1_1497x868.png) ### history * location.pathname 拿到路由地址 * onpopstate 监听 history 的变化 ![](https://img.kancloud.cn/6e/de/6edeae0235b75b7482fdc860c9fa37bf_1648x838.png) ![](https://img.kancloud.cn/17/1f/171f96207aa6e2d1e2a5af7492b0ef04_1931x1032.png) `history.pushState()`或者`history.replaceState()` 不会触发 onpopstate