vue-router hash/history 模式

基础知识

hash 模式
  • hash:在前端领域中,将 # 称为哈希符或者锚点,位于 # 的值则被称为哈希值。
  • 原理:onhashchange 事件。
  • 特点:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。通过 onhashchange 监听哈希值的变化,前端即使并没有发起http请求他也能够找到对应页面的代码块进行按需加载,做出响应。
history 模式
  • history:使用 history api 对浏览器历史记录栈进行操作。
  • 原理:H5 新增的 pushState()replaceState() 方法
  • 特点:pushState()replaceState() 方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

hash 模式与 history 模式区别

hash history
浏览器支持 基本支持所有浏览器 支持 HTML5 API 的浏览器
URL 显示 永远带有 # 号,不符合现阶段 URL 规范 符合现阶段 URL 规范
界面后退 onhashchange 事件处理跳转 history.back()
界面前进 onhashchange 事件处理跳转 hsitory.forward()
界面刷新 支持 二级界面会出现 404 错误
hash 模式缺点
  • URL 带有 # 号,不符合 URL 的规范(看起来也很丑)
  • 有的app里面url是不允许带有#号,如果使用 hash 模式将会引起错误
history 模式缺点
  • 只有支持 H5 API 的浏览器才支持该模式
  • 界面刷新会引起 404 错误
      原因:pushState()replaceState() 是将url替换并且不刷新页面,由于http 并没有去请求服务器该路径下的资源,当刷新时,如果服务器中没有相应的响应或者资源,就会显示404。
      解决方式:后台进行相应的配置,建议查看官方文档
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容