前端路由的介绍

前端路由

是用于实现页面间导航的一种技术,在不重新加载整个页面的情况下,通过改变地址栏的URL来更新内容。前端路由通常用于单页应用中,为用户提供更流畅的体验。

前端路由的工作原理

主要依赖于浏览器的History API(popstate, pushState, replaceState 三个事件)和url 的哈希部分(window.location.hash)来实现监听URL的变化, 根据url的变化来加载相应的视图和组件。

前端的路由主要分为两种

哈希路由

哈希路由的地址栏带有#, 以此可以判断一个路由是否属于哈希路由。哈希路由是通过hashchange 来监听地址栏的变化,来加载相应的视图和组件

history 路由

history 路由 是通过popstate来监听路由的变化。history 路由每刷新一次页面的时候,都会发送一个get请求,而hash路由刷新页面的时候,不会发送请求。

路由方式

静态路由

静态路由是指URL和页面内容之间的映射关系在编译时就已经确定,不会在运行时改变。每个URL对应一个固定的页面或组件。

静态路由通常用于那些页面内容固定不变的场景。

在静态路由中,每个URL都直接映射到一个特定的页面或组件,这些页面或组件在服务器上已经准备好,并且在用户访问这些URL时直接返回。

eg:博客网站,每个博客文章都有一个固定的URL

https://web-hls.blog.csdn.net/article/details/123697104

https://web-hls.blog.csdn.net/article/details/139579472

https://web-hls.blog.csdn.net/article/details/139047421

动态路由

动态路由是指URL和页面内容之间的映射关系在运行时动态确定。通常,动态路由会包含一个或多个参数,这些参数用于从数据库或API中获取数据,并动态生成页面内容。

eg: 一个电子商务网站,用户可以浏览不同类别的商品,URL可能看起来像这样。

https://example.com/products/shoes

https://example.com/products/clothes

https://example.com/products/electronics

相关推荐
KaMeidebaby3 分钟前
卡梅德生物技术快报|葫芦科植物遗传转化:Fast‑TrACC 工程化优化:葫芦科植物遗传转化效率提升与成本控制
前端·其他·百度·新浪微博
换日线°18 分钟前
vue 加入购物车抛物线动画
前端·javascript·vue.js
切糕师学AI1 小时前
为什么你的 SPA 网址必须包含 `#`?—— 前端路由 Hash 模式深度解析
前端·spa 网址·hash路由
冴羽1 小时前
超越Vibe Coding —— AI 辅助编程进阶指南
前端·javascript·ai编程
MXN_小南学前端1 小时前
自制和整理常用前端 AI Skills分享,从需求到页面(附github地址)
前端·ai编程
yuki_uix1 小时前
双 RAF + MutationObserver:微前端跳转后的滚动复原完整方案
前端
暗不需求1 小时前
一文吃透 React Context:跨层级通信的利器
前端·javascript·react.js
Wect1 小时前
前端工程化 Mock 数据原理与实践
前端·api·前端工程化
小宇的天下1 小时前
Calibre DESIGNrev 单元(Cell)操作核心指南
java·前端·javascript
镜宇秋霖丶2 小时前
2026.5.8@霖宇博客制作中遇见的问题
前端·vue.js·elementui