前端路由的介绍

前端路由

是用于实现页面间导航的一种技术,在不重新加载整个页面的情况下,通过改变地址栏的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

相关推荐
盟接之桥6 分钟前
盟接之桥--说制造:从“找缝隙”到“一万米深”——庖丁解牛式的制造业精进之道
大数据·前端·数据库·人工智能·物联网·制造
巴拉巴拉~~8 分钟前
Flutter 通用滑块组件 CommonSliderWidget:单值 / 范围 + 刻度 + 标签 + 样式自定义
开发语言·前端·javascript
韭菜炒大葱32 分钟前
现代前端开发工程化:Vue3 + Vite 带你从 0 到 1 搭建 Vue3 项目🚀
前端·vue.js·vite
栀秋66640 分钟前
面试常考的最长递增子序列(LIS),到底该怎么想、怎么写?
前端·javascript·算法
Melrose42 分钟前
Flutter - 使用Jaspr来构建SEO友好网站
前端·flutter
有点笨的蛋43 分钟前
Vue3 项目:宠物照片变身冰球运动员的 AI 应用
前端·vue.js
盖头盖1 小时前
【nodejs中的ssrf】
前端
江城开朗的豌豆1 小时前
TypeScript和JavaScript到底有什么区别?
前端·javascript
鸡吃丸子2 小时前
初识Docker
运维·前端·docker·容器
老华带你飞2 小时前
学生请假管理|基于springboot 学生请假管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端·spring