hash路由与history路由的区别

1.hash模式

hash模式的url会在尾巴后面带上#号，hash值的变化不会导致浏览器向服务器发出请求,不会导致重新加载页面,hash的改变的会触发hashchange时间,可以监测浏览器的前进后退。hash的传参会有体积的限制

2.history模式

history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中

需要与后端配合、后端可以拿到路由信息

有history.go()、history.back()、history.forward()、history.pushState()、history.replaceState()

hash路由 优缺点

• 优点

  • 实现简单，兼容性好（兼容到ie8）
  • 绝大多数前端框架均提供了给予hash的路由实现
  • 不需要服务器端进行任何设置和开发
  • 除了资源加载和ajax请求以外，不会发起其他请求

• 缺点

  • 对于部分需要重定向的操作，后端无法获取hash部分内容，导致后台无法取得url中的数据，典型的例子就是微信公众号的oauth验证
  • 服务器端无法准确跟踪前端路由信息
  • 对于需要锚点功能的需求会与目前路由机制冲突

History(browser)路由 优缺点

• 优点

  • 对于重定向过程中不会丢失url中的参数。后端可以拿到这部分数据
  • 绝大多数前段框架均提供了browser的路由实现
  • 后端可以准确跟踪路由信息
  • 可以使用history.state来获取当前url对应的状态信息

• 缺点

  • 兼容性不如hash路由(只兼容到IE10)
  • 需要后端支持，每次返回html文档