在前端开发过程中，应用的访问历史记录是很重要的一个用户体验，通常我们会使用前端路由来实现并管理历史记录。而 umi-history 这个npm包提供了一种更好的方式来添加、删除和监听历史记录的变化，下面就来详细介绍一下它的使用教程。
安装
如果你的项目是基于 umijs 框架的话，那么umi-history已经自带了，无需安装。如果不是的话，执行以下命令进行安装：
npm install umi-history
或者
yarn add umi-history
使用
umi-history 提供了下列 API 功能：
createBrowserHistory()
此 API 用于创建一个浏览器历史记录对象，可以使用它来添加、删除和监听浏览器的历史记录。
import { createBrowserHistory } from 'umi-history';
// 创建一个浏览器历史记录对象
const browserHistory = createBrowserHistory();
// 将路由信息添加到历史记录中
browserHistory.push('/dashboard');createHashHistory()
此 API 用于创建一个hash模式的历史记录对象，可以使用它来添加、删除和监听历史记录。
import { createHashHistory } from 'umi-history';
// 创建一个hash模式的历史记录对象
const hashHistory = createHashHistory();
// 将路由信息添加到历史记录中
hashHistory.push('/dashboard');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