前端框架路由实现的Hash和History两种模式的区别

7,115 阅读3分钟

前言

  • 之前面试的时候就有准备过前端框架中两种路由实现方式及区别,但是当时没专门下功夫去深入了解,就在网上搜了下别人总结的临时抱了下佛脚。但是事实证明,出来混,总是要还的,在后来的面试中又遇到了,而且这次问得更加深入,仅仅靠死记硬背来的知识总是遗忘得很快,网上别人总结的东西终归还是别人的,鉴于网上别人总结的内容有点杂乱无章,还是决定自己在此总结记录一番,以加深印象。

一、何为前端路由

  • 路由的概念来自于服务器端,在SPA(单页应用)中,路由描述的是URL到函数的映射关系,即在浏览器中输入一个URL,相应的控制器会对提交的请求进行解析,然后进行路由匹配,找到对应的模块和函数进行执行。

二、如何实现

  • 实现的两个核心问题是如何检测路由变化和如何改变URL而不刷新页面,通常有两种实现模式,一种是Hash模式,一种是History模式。

三、Hash模式

  • 早期的前端路由的实现就是基于location.hash来实现的,location.hash的值就是URL中#后面的内容 其实现原理就是监听#后面的内容来发起Ajax请求来进行局部更新,而不需要刷新整个页面。
  • 使用hashchange事件来监听 URL 的变化,以下这几种情况改变 URL 都会触发 hashchange 事件:浏览器前进后退改变 URL、<a>标签改变 URL、window.location改变URL。

优缺点

  • 兼容低版本浏览器,Angular1.x和Vue默认使用的就是hash路由
  • 只有#符号之前的内容才会包含在请求中被发送到后端,也就是说就算后端没有对路由全覆盖,但是不会返回404错误
  • hash值的改变,都会在浏览器的访问历史中增加一个记录,所以可以通过浏览器的回退、前进按钮控制hash的切换
  • 会覆盖锚点定位元素的功能
  • 不太美观,#后面传输的数据复杂的话会出现问题

四、History模式

  • history 提供了 pushStatereplaceState 两个方法来记录路由状态,这两个方法改变 URL 不会引起页面刷新
  • history 提供类似 hashchange 事件的 popstate 事件,但 popstate 事件有些不同:通过浏览器前进后退改变 URL 时会触发 popstate 事件,通过pushState/replaceState或<a>标签改变 URL 不会触发 popstate 事件。好在我们可以拦截 pushState/replaceState的调用和<a>标签的点击事件来检测 URL 变化,所以监听 URL 变化可以实现,只是没有 hashchange 那么方便。
  • pushState(state, title, url)replaceState(state, title, url)都可以接受三个相同的参数:
  • state:需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取
  • title:标题,基本没用,一般传 null
  • url:设定新的历史记录的 url,新的 url 与当前 url 的 origin 必须是一样的,否则会抛错,url可以是绝对路径,也可以是相对路径。

优缺点

  • 使用简单,比较美观
  • pushState()设置新的URL可以是任意与当前URL同源的URL,而hash只能改变#后面的内容,因此只能设置与当前URL同文档的URL
  • pushState()设置的URL与当前URL一模一样时也会被添加到历史记录栈中,而hash#后面的内容必须被修改才会被添加到新的记录栈中
  • pushState()可以通过stateObject参数添加任意类型的数据到记录中,而hash只能添加短字符串
  • pushState()可额外设置title属性供后续使用
  • 前端的URL必须和向发送请求后端URL保持一致,否则会报404错误
  • 由于History API的缘故,低版本浏览器有兼容行问题

参考