前端路由history和hash

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情”

为什么有路由

在单页面（SPA）应用中，只有一个HTML页面，不能进行页面间的跳转，而是选择用Javascript更新DOM来模拟多个网页的效果

路由的特点

• 可以监听URL的变化
• 改变页面的URL但不发送请求
• 不刷新页面的情况下可以改变URL地址

路由分类

• hash：

  • 主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件，然后通过获取 location.hash 得到当前的路径标识符，再进行一些无刷新路由跳转的操作
  • 在hash模式中，页面的URL上有#，eg：http://127.0.0.1:8080/#/index中的#/index就是hash值。
  • hash值改变不会导致浏览器发送请求
  • 基本api：
    • location.href：返回完整的 URL
    • location.hash：返回 URL 的hash值
    • location.pathname：返回 URL 路径名
    • hashchange 事件：当 location.hash 发生改变时，将触发这个事件

• history：

  • 使用H5标准中的history api通过监听popstate事件来对DOM进行操作，每次路由变化都会引起重定向允许操作

  • 一般用来解决ajax请求无法通过回退按钮回到请求前状态的问题，器的曾经在标签页或者框架里访问的会话历史记录

  • 基本api：

    • history.go：路由跳转。n为正数，向前跳转n个页面；n为负数，向后跳转n个页面
    • history.back：路由后退。相当于点击浏览器左上角的<-按钮或者history.go(-1)
    • history.forward：路由前进。相当于点击浏览器左上角的->按钮或者history.go(1)
    • history.pushState(data[,title][,url])：向历史记录中追加一条记录
    • history.replaceState(data[,title][,url])：替换当前页在历史记录中的信息
    • history.state：获取当前页的state信息
    • window.onpopstate：在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数

hash和history的对比

• hash优点
  • 浏览器和框架的兼容性好
  • 不需要服务端支持
  • 除资源加载和ajax请求之外没有其他请求
• hash缺点
  • 对于一些需要重定向的路由，后端不能获取hash的部分内容，也就无法获得URL中的数据
  • 服务端不能准确跟踪前端的路由信息
  • 对于需要锚点的需求会和hash机制冲突
• history优点
  • 对于重定向的路由，后端可以拿到全部的数据
  • 服务端可以准确的跟踪路由信息
  • 可以用history.state获取URL的状态信息
• history缺点
  • 浏览器兼容性不如hash
  • 需要后端每次返回html文档

使用场景

• hash：
  • 需要兼容IE8
  • 没有重定向传参需求(第三方认证oauth)
  • 没有锚点跳跃需求
  • 后端不需要跟踪前端路由信息
  • hybrid app需要将前端资源打包在应用内，因为html的域在file://下，所以不能发生重定向
• history：
  • 页面内锚点需求
  • 需要重定向传参
  • 同构直出
  • 后端跟踪路由信息
  • 附加路由信息(history.state)获取路由状态

参考文档

juejin.cn/post/684490…