Hash 和 History模式的区别

表现形式的区别

• Hash 模式
  https://music.163.com/#/playlist?id=3102961864(有# 号，# 号后面带路由地址，？号携带 url 参数，官方文档说这种模式很丑，路径中带着一些与数据无关的符号，比如 #，？)
• History 模式
  https://music.163.com/playlist/3102961864(正常的url，要用好history 模式的话还要服务端配置支持)

原理的区别

• Hash 模式是基于锚点，以及 onhashchange 事件

• History 模式是基于 HTML5 中的 History API

  • history.pushState() IE10 以后才支持
  • history.replaceState()

VueRouter 实现原理

VueRouter 是前端路由，当路径切换的时候在浏览器端判断当前路径并加载当前路径对应的组件

Hash 模式

• URL中 # 后面的内容作为路径地址（如果只改变路径 # 后面的内容，浏览器不会向服务器请求这个地址，但是它会把这个地址记录到浏览器的访问历史中）
• 监听 hashchange 事件
• 根据当前路由地址找到对应组件重新渲染

History 模式

• 通过 history.pushState() 方法改变地址栏
• 监听 popsstate 事件（记录改变后的地址）
• 根据当前路由地址找到对应组件重新渲染