路由的实现原理是什么？

1、概述路由

路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源
实现原理：检测url的变化，截获url地址，然后解析来匹配路由规则

2、hash模式

其底层源码，主要是通过添加url的hash变化的监听器来实现，通过hashchange事件的触发知道hash值发生了哪些变化，通过transitionTo匹配路由，并通过路由配置，跳转到新的视图组件。
当浏览器历史返回或者直接输入链接跳转时，会触发hashchange事件；刷新页面时不会触发hashchange，会用load事件代理
因为改的是hash，所以不会向服务器发送请求

2、history模式

其底层源码实现，创建HTML5history类，通过监听popState事件，利用transitionTo，进行路由匹配，更新DOM，同时添加go push（通过pushState实现） replace（通过replaceState实现）方法
window.onpopstate事件可以监听的操作：
- 点击浏览器的前进按钮/后退按钮
- 执行js代码:history.go(n) / history.forward() /
  调用history.pushState()或history.replaceState()不会触发popstate事件
history.pushState()只会改变当前地址栏的路径，并不会更新页面内容，；history.replaceState()就是把当前的历史记录改成目标路径
通过浏览器历史返回，触发popState事件；通过pushState()跳转会改变url且不会向浏览器发送请求；刷新页面或直接链接跳转，会向浏览器发送请求，所以需要服务器做重定向，然后触发Load事件
pushState和replaceState这两个HTML标准中的API，可以改变url地址且不会发送请求。这两者的区别是replaceState不会记录到历史栈
因为没有#,所以当用户刷新页面之类的操作，浏览器还是会给服务器发送请求。为了避免出现这种情况，这个实现需要服务器的支持，需要把所有路由都重定向到根页面index.html

参考：前端路由的前生今世及实现原理
window.onpopstate事件和history

路由的实现原理是什么？相关推荐

vue中路由的实现原理？
vue中路由的实现原理? 1.首先需要了解一下Vue路由分为两种,一种是哈希路由,其最明显的特征是URL地址带'#'号的,其实对地址栏也就不怎么美观一点.其次是history路由也就是URL不带'#' ...
路由器互联端口处于不同网段的路由方法和原理
如下图:两台cisco路由器相连接的两个端口不在同一个网络,如何实现两台路由器的互联?初看似乎绝对不可能,但是这是可行的,而且我已经把这个变成了现实.这里讲述配置的方法,以及解释原理. 这个就要讲到路 ...
.NET/ASP.NET Routing路由（深入解析路由系统架构原理）
阅读目录: 1.开篇介绍 2.ASP.NET Routing 路由对象模型的位置 3.ASP.NET Routing 路由对象模型的入口 4.ASP.NET Routing 路由对象模型的内部结构 4 ...
Go框架 gin 源码学习--路由的实现原理剖析
往期回顾: gin源码解析 - gin 与 net/http 的关系 gin 源码解析 - 详解http请求在gin中的流转过程上面两篇文章基本讲清楚了 Web Server 如何接收客户端请求,以 ...
ASP.NET路由系统实现原理：HttpHandler的动态映射
我们知道一个请求最终通过一个具体的HttpHandler进行处理,而我们熟悉的用于表示一个Web页面的Page对象就是一个HttpHandler,被用于处理基于某个.aspx文件的请求.我们可以通过H ...
IPv6基础介绍--IPv6路由基础--DHCPv6原理与配置——总结
一.IPv6基础介绍 1.IPv6是Internet工程任务组(IETF)设计的一套规范,它是网络层协议的第二代标准协议,也是IPv4(Internet Protocol Version 4)的升级版 ...
Traceroute(路由追踪) --- 的原理及实现
现实世界中的网络是由无数的计算机和路由器组成的一张的大网,应用的数据包在发送到服务器之前都要经过层层的路由转发.而Traceroute是一种常规的网络分析工具,用来定位到目标主机之间的所有路由器. 原 ...
【笔记】P2P - 1 路由NAT（原理、四种类型、问题），P2P（概念、兼容NAT方案：ACL、upnp中间件、“打洞”、Relay）
参考路由器四种NAT - https://blog.csdn.net/wgl307293845/article/details/120450626 P2P介绍(一)NAT详解 ⭐️ - http:/ ...
vue中路由实现的原理？
一.概念通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...

路由的实现原理是什么？

1、概述路由

2、hash模式

2、history模式

路由的实现原理是什么？相关推荐

最新文章

热门文章