【面试】前端路由hash和history的区别

梳理下hash/history两种路由模式的区别。

1. 前端路由的由来

• 说前端路由由来之前，先看下后端路由：

后端路由：在前后端不分离的时代，路由都是通过服务端指定的，服务端根据客户端发来的HTTP请求，将返回的数据于模板引擎响应结果结合后进行渲染，将渲染完毕的页面发送给客户端。
优点：SEO友好，爬虫爬取到的页面就是最终的渲染结果。
缺点：每次发起请求都要刷新页面，用户体验不好，服务器压力大。

• SPA

SPA是单页面应用Single Page web Application的简写。简单理解就是一个web项目只有一个html文件，一旦页面加载完成，SPA不会因为用户的操作进行重新加载或跳转，而是用JS动态变换html的内容（使页面无需重新加载，用户体验更加流程），页面本身的url并没有变化，这将导致两个问题：
1.SPA无法就记住用户的操作：刷新 & 前进 & 后退。
2.实际只有一个url，对SEO不友好，爬虫获取到的html只是模板而不是最终的页面。

• 前端路由的由来可以理解成是基于SPA页面局部更新特点的，但是要解决SPA的两个问题，实现：
  • 改变url不让浏览器向服务器发送请求
  • 监听url的变化，执行对应的操作
    

2.hash模式

• hash模式：www.baidu.com/#hashhash
• hash指的就是url的#及后面的字符，如上面的“#hashhash”
• hash模式的特点；
  • hash值的变化不会导致浏览器向服务器发送请求，不会引起页面刷新
  • hash值变化会触发hashchange事件
  • hash值变化会在浏览器的历史中留下记录，使用的浏览器的后退按钮可以回到上一个hash值
  • hash永远不会提交到服务器，即使刷新页面也不会。

由以上特点可见，hash模式完全满足前端路由的需求，因此在h5的history模式出现之前，基本都是使用hash模式实现前端路由。

• 优缺点：
  • 优点：
    • 兼容性好，支持低版本和IE浏览器
    • 实现前端路由无需服务端支持
  • 缺点
    • url带有#符号，略丑
      

3.history模式

• 在HTML5之前，浏览器就有history对象了，只能用于多页面之间的跳转

history.go(n) // n>0前进n页；n<0后退n页
history.forward() // 前进一页
history.back() // 后退一页

• 在HTML5规范中，history中增加了新的API：

/*
  参数说明：
    state：合法的JavaScript对象，可以用在popstate对象中
    title：标题，基本忽略，用null
    url: 任意有效的url，将要跳转的新地址
*/
history.pushState(state, title, url) // 保留现有记录的同时，将url加到历史记录中
history.replaceState(state, title, url) // 将历史记录中的当前页面替换成url
history.state // 返回当前状态对象

• pushState和replaceState方法可以改变url，但是不会刷新页面，浏览器不会向服务端发送请求，具备了实现前端路由的能力。
• 如何监听url的变化？
  • 对比hash的hashchange方法，history的变化不会触发任何事件，我们可以通过罗列可能触发history变化的情况，对这些情况进行拦截，以此监听history的变化。
  • 对于单页面的history模式而言，url的改变只能由以下情况引起：
    • 1.点击浏览器的前进/后退按钮，onpopstate可以监听到
    • 2.点击a标签
    • 3.在JS代码中触发history.pushState()或history.replaceState()
• history模式的url发生变化时不会立即向服务器发起请求，刷新会立即请求。
  

4.两种模式的区别

1. 外观：hash的url有个#符号，history没有，history外观更好看。
2. 刷新：hash刷新会加载到地址栏对应的页面，history刷新浏览器会重新发起请求，如果服务端没有匹配当前的url，就会出现404页面。
3. 兼容性：hash能兼容到IE8，history只能兼容到IE10。
4. 服务端支持：hash（#及后面的内容）的变化不会导致浏览器向服务器发起请求；history刷新会重新向服务器发起请求，需要在服务端做处理：如果没有匹配到资源，就返回同一个html页面。
5. 原理：hash通过监听浏览器的onhashchange()事件，查找对应的路由规则；history利用H5新增的pushState()和replaceState()方法改变url。
6. 记录：hash模式只有#后面的内容被修改才会添加新的记录栈；history通过pushState()设置的url于当前url一模一样也会被记录到历史记录栈。

5.使用场景（如何选择）

一般情况下，vue-router前端路由使用hash和history模式都可以。

1. 如果追求外观，history更合适。
2. 对比hash，history有以下优势：

• pushState()设置的url可以是与当前url同源的url；而hash只能改变#后面的内容，只能设置于当前url同文档的url。
• pushState()设置的url与当前url一模一样也会被添加到历史记录栈；hash必须#后面的内容被更新才会记录。
• pushState()可以通过stateObject参数添加任意类型的数据到记录中，而hash只能添加短字符串。
• pushState()可以额外设置title属性供后续使用。

3. history模式需要后端配合。
4. hash兼容性更好。

参考链接：
https://zhuanlan.zhihu.com/p/364019280

https://www.cnblogs.com/zhif97/p/13875513.html

https://juejin.cn/post/6844903890278694919#heading-7

https://www.jianshu.com/p/0b65723c18bd