VueRouter用到的History hash模式处理事件 hashchange

iwin621
716 阅读3分钟

这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战

前言

前文学习了关于浏览器中的 JS 之浏览历史-history以及其使用方式, 本文继续来学习浏览器中的 JS - 浏览历史记录的管理 API - hashchange

其实好多让我们方便省心使用的库/框架底层都是 JS 基础的封装, 比如各种路由的封装.通过前几篇文章我们学习记录了浏览器中的 JavaScript, 更多更文-各知识点小结-list:

浏览器 浏览历史管理方法-hashchange

hashchange 这个 hash 对于我们开始学习启动一个 Vue 项目应该特别熟悉, yarn dev启动 Vue 项目在浏览器地址栏 会在 url 末尾出现一个 #, 这就是 hash 模式, 另外还有 history 模式, 地址栏就没有 #. 这里底层的原理还是应用的 浏览器底层 API 来封装的.

hashchange

第一种处理浏览器历史记录的方案是 hashchange事件 和 location.hash

location.hash 是用于对 URL 片段进行设置标识符. 通常用于锚点定位的滚动到文档页面的指定文档区域, 指定要滚动到的文档区域的 ID,location.hash不一定必须是元素 ID, 也可以是设置的任意字符串

设置 location.hash 会更新浏览器的地址栏 URL, 在末尾#heading-6,同时也相当于一条历史记录被添加到历史记录中.

// 比如 url:
URL: https://juejin.cn/post/7023643374569816095#heading-6

点击目录会增加历史记录

hashchange 事件

通过定义一个 window.onhashchange 监听函数, 也可以使用 事件监听 addEventListener注册一个 hashchange监听器, 读取 location.hash.

这样就可以来处理 url 来显示应用的页面的显示状态, 当发生变化是通过相关逻辑步骤来更新显示应用的新状态.

相关更文阅读

  1. JavaScript 学习理解-Number-这是一个函数

  2. JS 学习理解-自动类型转换

  3. JavaScript 中的中缀运算符

  4. 你知道 JavaScript 的 typeof 是什么吗?

  5. 学习 JavaScript 中几个代表性事件(Event)

  6. 学习理解客户端 JavaScript-事件分类(一)

  7. 理解浏览器中的 JavaScript-事件注册

  8. 浏览器中的 JavaScript-fetch()网络请求方法

  1. HTTP 响应代码
  2. 浏览器中的 JS-WebSocket 通信(一)
  3. 学习浏览器中的 JS-WebSocket 发送接收消息(二)
  4. 学习浏览器中的 JS-存储的分类(一)
  5. 浏览器中的 JS-history

Calm Down & Carry On!

Buy Less by Know More!

学习, 记录, 积累 是一个漫长的痛苦过程! 也就是这个不断经历痛苦的锤炼, 让我们更加强大! 加油!

参考内容

avatar
文章
阅读
粉丝