前端开发路由实现原理

最新推荐文章于 2024-11-14 10:40:40 发布

hbzyin

最新推荐文章于 2024-11-14 10:40:40 发布

阅读量2.1k

点赞数 1

分类专栏： WEB开发文章标签：网页路由原理 router history location

本文链接：https://blog.csdn.net/hbzyin/article/details/79120754

版权

本文探讨了前端路由的实现原理，包括History API和Hash两种机制。History API在现代浏览器中允许页面URL变化而不重新加载，而Hash则通过监听location对象变化实现页面更新。此外，还介绍了AngularJS的路由插件ui-router，强调了路由状态定义和视图的重要性。

摘要由CSDN通过智能技术生成

路由，某度的解释为：指分组从源到目的地时，决定端到端路径的网络范围的进程；路由工作在OSI参考模型的第三层–网络层的数据包转发设备，路由器通过转发数据包来实现网络互联。

对应在网站开发中的路由就是指网页页面从源网页到目标展示网页时，决定网页到网页跳转展示的一系列过程，早期的路由都是后端实现的，直接根据url来reload页面，即页面不同元素绑定不同的url链接地址，用户点击不同的链接，后端服务器返回不同的页面文档，浏览器重新进行加载渲染。

随着项目的增大，服务器的压力越来越大，ajax技术的出现也实现了页面非reload就能局部刷新数据，奠定了前端路由的基础，可以通过记录url来记录ajax的变化，从而实现前端路由；
前端路由实现的本质都是基于浏览器的location对象或者history对象的方法特性结合ajax技术来实现的，实际生产开发中运用的各个不同框架中的路由模块、插件、库都是再次基础上进行了不同程度的封装，进而实现路由控制。