前端路由Hash和History的区别

前端路由的由来可以理解成是基于SPA页面局部更新特点的,但是要解决SPA的两个问题:

  • 改变URL不让浏览器向服务器发送请求
  • 监听URL的变化,执行对应的操作

Hash模式

URL:www.baidu.com/#hashhash
特点:

  • hash值的变化不会导致浏览器向服务器发送请求,不会引起页面刷新
  • hash值的变化会触发hashchange事件,通知控制DOM对象的切换
  • hash值变化会在浏览器的历史中留下记录,使用浏览器的后退按钮可以回到上一个hash的值
    优点:兼容性好,支持低版本和IE浏览器;实现前端路由无需服务器支持
    缺点:URL带有#符号,影响美观;URL路径只能存在一个#,会导致子应用和主应用在定义URL路径上存在困难

History模式

History模式不需要借助锚点技术重写URL路径,没有#。history模式采用的history对象中的pushState()函数重写URL路径,可在触达重新加载的情况下变更URL路径。需要在服务器端配置重定向。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容