• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
社会优先于个人
博客园    首页    新随笔    联系   管理    订阅  订阅
前端路由,history 和hash 模式的区别

前端路由的功能

  • 改变url不向服务器发送请求
  • 检测url的变化
  • 解析url的信息来匹配路由规则
  • hash模式和history模式都能够实现这个功能

hash模式

  • 指的就是#和之后的字符
  • hash也称作锚点,本身是作为页面定位的,可以是id对应元素显示在可视区域内。
  • hash改变不会向浏览器发送请求
  • hash改变会触发hashChange事件
  • 浏览器的前进和后退,能够控制hash值
  • html5 的history之前,都是使用hash来实现前端路由的
  • hash本来是用来做页面定位的,如果用来做路由的话,锚点功能就不能用了
  • hash的路由传参,有体积的限制,因为传参基于url
  • hash之后的内容,不会包含在请求中
  • 只能修改#之后的,所以只能设置与当前同文档的url
  • 设置与当前相同的url,历史记录不会增加

history模式

  • 路由传参,可以放在url里面,也可以单独放在一个对象里面
  • 改变不会向浏览器发送请求
  • 改变会触发onpopstate事件
  • 可以设置当前同源文档的任何url
  • pushState设置与当前相同的url,历史记录还是会增加
  • 需要后端配合,增加一个覆盖所有情况的候选资源,如果匹配不到任何资源可以指向index.html。否则用户刷新页面,就会404
posted on 2022-03-16 11:33  社会优先于个人  阅读(132)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3