详解Router路由 Hash 和 History 两种模式

写在前面

提到 Router 路由，相信大家都不陌生，不管是在 Vue 还是 React 框架中，都有使用到。

但是在使用的时候有两种模式 hash 和 history，不知道大家有没有思考过这两者的区别以及底层实现原理，那今天就借这道面试题，我们来好好的聊聊，就以 Vue Router 为例。

Hash 模式

Hash 模式是通过监听 URL 中的 hash 值( #及其后面的部分)来实现路由切换和组件渲染的。

例如:

http://example.com/#/home    // 显示首页  
http://example.com/#/about   // 显示关于我们页面

• 使用 URL 的 hash 部分来模拟路由的路径。
• Hash 值的改变不会导致浏览器发送新的请求到服务器。
• Hash 模式不需要服务端做任何配置。

优点:

• 兼容性好,支持所有浏览器,包括不支持 HTML5 History API 的老旧浏览器。
• 服务端无需做特殊配置。

缺点:

• URL 中有 # 号，不太美观。
• 部分老旧的浏览器可能会有效率问题。

Hash模式路由实现原理

在 hash 模式下，路由的实现主要依赖于 URL 的 hash 部分（即#后面的部分）。

1. URL结构

当 URL 的 hash 部分改变时，页面不会重新加载，而是触发一个 hashchange 事件。

http://example.com/#/home    // 显示首页  
http://example.com/#/about   // 显示关于我们页面

2. 监听hashchange事件

在 Vue Router 中，会监听浏览器的 hashchange 事件。当 hash 值发生变化时，Vue Router会获取新的hash值，并与定义的路由规则进行匹配，找到对应的组件进行渲染。

window.addEventListener('hashchange', function() {
  var hash = window.location.hash.substring(1); // 获取当前的 hash 值，去掉开头的 '#'
  
  if (hash === 'home') {
    // 显示首页内容
  } else if (hash === 'about') {
    // 显示关于页面内容
  }
});

History 模式

History 模式利用 HTML5 History API 中的 pushState 和 replaceState 方法来实现 URL 的导航，无需 # 号。

例如:

http://example.com/home    // 显示首页  
http://example.com/about   // 显示关于我们页面

• 使用标准的 URL 路径来模拟路由的路径。
• 导航时，浏览器不会重新请求该 URL，只会更新浏览器的历史记录和显示当前 URL。

优点:

• 更加美观,看起来像标准的网站链接。
• 符合 HTML5 标准，支持浏览器的前进/后退按钮。

缺点:

• 部分老旧的浏览器不支持 HTML5 History API，需要使用垫片库(Polyfill)来支持。
• 需要在服务端做特殊配置，确保所有的 URL 都能找到应用入口文件(例如 index.html)，否则会出现 404 错误。

History模式路由实现原理

在history模式下，路由的实现主要依赖于HTML5的History API。

1. URL结构

history 模式的 URL 看起来更加干净，没有 hash 符号。

http://example.com/home    // 显示首页  
http://example.com/about   // 显示关于我们页面

2. 监听popstate事件

 对于history模式的路由实现原理，可以使用 HTML5 History API 中的 pushState 和 replaceState 方法来实现。当用户点击链接或执行前进/后退操作时，可以通过这些方法改变浏览器的历史记录，同时不会向服务器发送请求。

// 添加路由
history.pushState({ page: 'about' }, 'About', '/about');

// 替换当前路由
history.replaceState({ page: 'contact' }, 'Contact', '/contact');

// 监听路由变化
window.addEventListener('popstate', function(event) {
  var state = event.state;
  
  if (state.page === 'about') {
    // 显示关于页面内容
  } else if (state.page === 'contact') {
    // 显示联系页面内容
  }
});

需要注意的是,在使用 history 模式时，我们需要在服务端配置一个单页应用的入口文件(例如 index.html)，并将所有不匹配静态文件的路由都指向这个入口文件。否则，当用户直接访问 http://example.com/about 时,服务端会返回 404 错误。

总结

总的来说,无论是 Hash 模式还是 History 模式,Vue Router 都是通过监听相应的事件,并在事件发生时执行路由切换逻辑,从而实现单页面应用的 URL 导航。两种模式的主要区别在于监听的事件不同,以及 History 模式需要服务端配置支持。