在前端开发过程中，应用的访问历史记录是很重要的一个用户体验，通常我们会使用前端路由来实现并管理历史记录。而 umi-history 这个npm包提供了一种更好的方式来添加、删除和监听历史记录的变化，下面就来详细介绍一下它的使用教程。
安装
如果你的项目是基于 umijs 框架的话，那么umi-history已经自带了，无需安装。如果不是的话，执行以下命令进行安装：
--- ------- -----------
或者
---- --- -----------
使用
umi-history 提供了下列 API 功能：
createBrowserHistory()
此 API 用于创建一个浏览器历史记录对象，可以使用它来添加、删除和监听浏览器的历史记录。
------ - -------------------- - ---- -------------- -- ------------- ----- -------------- - ----------------------- -- ------------- ----------------------------------
createHashHistory()
此 API 用于创建一个hash模式的历史记录对象，可以使用它来添加、删除和监听历史记录。
------ - ----------------- - ---- -------------- -- ----------------- ----- ----------- - -------------------- -- ------------- -------------------------------
History 对象属性和方法
无论你使用的是 createBrowserHistory() 还是 createHashHistory()，返回的实例都是同一个对象。它具有一些属性和方法：
- length：历史记录中的条目数。
- action：当前历史记录条目的动作类型：
POP（退回）或PUSH（前进）或 REPLACE`（替换）。 - location：当前页面的位置。
- push(path, [state])：将新页面添加到历史记录中。
- replace(path, [state])：用新页面替换当前页面。
- go(n)：向后或向前移动n个历史记录条目。
- goBack()：相当于 go(-1)。
- goForward()：相当于 go(1)。
- block(prompt)：阻止在当前位置（位置在 history 的栈顶）的 navigation（或者用下文的语言句式阻止用户离开当前页面）。
------ - -------------------- - ---- -------------- -- ------------- ----- -------------- - ----------------------- -- --------- ----------------------------------- -- ---------- ---------------------------------- -- ------------ ----------------------
listen()方法
此方法可以监听浏览器历史记录发生的变化，当有历史记录添加、删除或被替换时就会触发。
------ - -------------------- - ---- -------------- -- ------------- ----- -------------- - ----------------------- -- -------- -------------------------------- ------- -- - --------------------- -- -------------------- --- --- ------ -- ------------ --- -- ---------- ----------------------------------
示例代码
下面是一个简单的例子，使用 umi-history 包，展示如何使用它来管理历史记录。
------ - -------------------- - ---- -------------- -- ---- ------- ------- -- ----- ------- - ----------------------- -- -- ------- ---- ------------------------- ------- -- - --------------------- -------- --- -- ---- ------- -- ------------------ -- ----- ------- -- -------------------- ---- -- ----- ------- -- -----------------
总结
使用 umi-history 包，我们得以继续使用现代浏览器的历史记录 API 来管理我们应用的访问历史记录。这个包的使用也非常简单，只需几行代码就能轻松的实现添加、删除和监听浏览器历史记录的变化。希望这篇文章对您有所帮助，谢谢！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005727f81e8991b448e8b07