eliseumds-history是一款基于 HTML5 的 History API 编写的 npm 包。它提供了一个简单易用的接口，让你能够在前端实现浏览器 history 功能。本文将介绍如何使用eliseumds-history包，并提供示例代码进行演示。
安装
我们可以通过 npm 安装 eliseumds-history：
npm install eliseumds-history --save
如果你不使用 npm 包管理器，可以从 Github 仓库下载源码，文件夹中包含源文件和示例页面。
使用方法
首先，让我们导入 eliseumds-history 包到我们的项目中。 安装后，你可以使用 ES6 的 import 语法导入包：
import History from 'eliseumds-history';
接下来，让我们看下该包提供的 API。
pushState()
该函数用于将新的浏览器历史记录加入到历史记录栈中。它参数有三个：状态数据、标题和 URL。
History.pushState({ page: 1 }, "title", "?page=1");replaceState()
该函数用于修改当前记录的状态数据、标题和 URL。它的参数和 pushState() 相同。
History.replaceState({ page: 2 }, "title", "?page=2");go()
这个函数用于在历史记录中前进或后退指定步数。如果你想要在历史记录中回退一步，你只需要调用 go(-1)，并且可以调用 go(1) 前进一步。
History.go(-1);
back()
这个函数返回到历史记录中的前一个状态。相当于 History.go(-1)。
History.back();
forward()
这个函数前进到历史记录的下一个状态。相当于 History.go(1)。
History.forward();
示例代码
接下来，我们将演示如何使用 eliseumds-history 包。我们可以创建一个简单的网站，并使用浏览器 history 功能，使得网站可以无需刷新页面而进行导航。
我们先编写 HTML：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------------
-------
------
-----
----
------ -------- --------------------------
------ ------------- ----------------- ----------
------ ------------- ----------------- ----------
-----
------
---------
-------- ---------
------- -- - ---- --------
----------
------- -------------------------
-------
-------然后我们创建一个 app.js 文件。
-- -------------------- ---- -------
------ ------- ---- --------------------
----- ---------- - --- -- -
----------------------- ----- -----
---------
--
----- ------ - ----- -- -- -
----- ------ - -
- ----- ---- ----- -- -- ----------------- ------ --
- ----- --------- ----- -- -- ----------------- - ------ --
- ----- --------- ----- -- -- ----------------- - ------ -
--
-- ---- ---- ----- --- --------- -----
----- ---------------- - ---------------- -- -
------ -
------ ------
-------- ----------------- --- ----------
--
---
--- ----- - ------------------------------------ -- ------------------------
-- -------- -
----- - -
------ ----------
-------- ----
--
-
--------------------------------
--
--------------------------------------------- -- -- -
--------------------------------------- - -- -
-- --------------------------------- -
-------------------
--------------------------
-
---
---------
---我们定义了两个函数：router() 和 navigateTo()。 navigateTo() 函数将新的浏览器历史记录加入到历史记录栈中，并调用 router() 函数以更改当前视图。
router函数将查找传入的 URL 与保存在该函数中的所有路径进行匹配。如果路径匹配，则该路线中的视图将被呈现。如果路径不匹配，它将呈现默认视图（目前为 home）。
最后，我们通过监听 click 事件，使用 navigateTo 来阻止默认链接行为，并使用该链接的网址调用 navigateTo 函数。
现在我们运行在控制台里打印出预期的视图。
现在你已经有了一个前端网站，并且使用了 eliseumds-history 包，使得你可以使用浏览器 history 功能，使网站可以无需刷新页面而进行导航。
总结
使用 eliseumds-history 包可以在前端实现浏览器 history 功能，而无需刷新页面便可以进行导航。本文介绍了该包的使用方式，并演示了简单的前端导航示例。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e29b9