路由的实现原理是什么?

时间: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