路由的实现原理是什么？

时间：2024-04-09 19:07:09

1、概述路由

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

2、hash模式

路由的实现原理是什么？

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

2、history模式

路由的实现原理是什么？

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

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

相关文章