什么是 @motorcycle/history？
@motorcycle/history 是一个 JavaScript 库，专用于前端应用程序中的路由历史记录管理。它可用于创建可重放、可撤销的浏览器历史记录，并将其与状态管理库（如 Redux）集成。它还提供了一些方便的函数，用于与 url 相关的任务，如解析和序列化 url 。
安装
您可以使用以下命令将 @motorcycle/history 添加到您的项目中：
--- ------- -------------------
用法
基本用法
使用 @motorcycle/history 的最基本方法如下所示：
------ - ------------- - ---- ---------------------- ----- ------- - ----------------
调用 createHistory() 会返回一个包含以下函数的对象：
push(pathname: string, state?: any): 向历史记录中添加新条目。replace(pathname: string, state?: any): 用当前位置替换最后一个条目。go(n: number): 加 n（可以是负数） 表示前进还是后退。goBack():等同于go(-1)。goForward():等同于go(1)getLocation(): 获取当前位置，并返回一个 LocationLike 对象。listen(cb: (location: LocationLike) => void): 注册一个回调，每次位置改变时都会被调用。
访问位置信息
要获取当前位置信息，您可以使用 getLocation()。
----- -------- - ---------------------- -- - --------- ---- ------- --- ----- --- ------ --------- -
getLocation() 会返回一个对象，其中包含以下键：
pathname：表示 URL 中的路径部分（从域名之后的斜杠到查询字符串之前的斜杠）的字符串。search：表示 URL 中的查询字符串的字符串。hash：表示 URL 中的哈希的字符串。state：表示与当前位置关联的状态对象。该值使用 push 或 replace 函数提供的第二个参数设置。
追加新位置
您可以使用 push 函数将新位置添加到历史记录中。
-------------------------- -- ------- ------------
push() 接受一个字符串参数，表示您想要添加到历史记录中的新位置的路径，如上例。
替换当前位置
您可以使用 replace () 将当前位置替换为新位置。
----------------------------- -- ------- ------------
replace() 接受一个字符串参数，表示您想要将当前位置替换为的新位置的路径，如上例。
前进/后退/指定移动
要前进或后退，您可以使用 go() 函数。
--------------- -- --- -------- -------------- -- --- -----------
go() 接受一个整数参数，表示您要向前（正数）或向后（负数）移动的条目数，如上例。
监听位置更改
如果您想在位置更改时执行一些操作，例如更新视图状态，可以使用 listen() 函数。
----------------------- -- - --------------------- ------- ---- ---------- ---
listen() 接受一个函数作为参数，每当位置更改时都会调用该函数，并传递包含新位置信息的 LocationLike 对象作为其唯一参数，如上例。
解析和序列化 URL
另一个有用的功能是将 URL 字符串解析为 LocationLike 对象或将 LocationLike 对象序列化为 URL 字符串。
------ - ---------- ---------- - ---- ---------------------- -- -- --- --- ----- -------- - ----------------------------------------- -- --- ------------ -- ----- --- - --------------------- -- -----------------------------
结论
@motorcycle/history 是一种管理前端应用程序历史记录的有效方法。它不仅非常灵活，而且易于使用和集成到您的项目中。通过管理浏览器历史记录，您可以为您的用户提供更好的用户体验，并增强客户端路由相关的可能性，所以尽管使用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bcc967216659e2447b0