浏览器 History API 使用教程

浏览器 History API 使用教程。React Router 和 Vue Router 都提供了基于浏览器 History API 的路由实现，那么 History API 都有哪些操作呢？这期视频我我们来看一下。

History API 可以编程式的控制页面在历史记录间进行跳转，并且能修改历史记录。

基本操作

history.back() 可以后退一步，访问跳转到当前 URL 之前的 URL。

// https://zxuqian.cn
// 随便跳转 3 次

history.back();

history.forward() 前进一步，如果当前页面已经是最新的，那么没有任何操作，如果发生过后退操作，那么它会跳转到上一次后退前的 URL。

history.forward();

history.go() 可以前进或后退任意步，负数表示后退，正数表示前进，0 表示刷新当前页面。

history.go(-2);
history.go(1);
history.go(0);

history 对象（打印一下）还包含 pushState、replaceState 这两个方法，以及 state 和 scrollRestoration 属性。

history;

Push State

调用 pushState() 可以在当前历史记录里新增一条，但页面不会实际发生跳转，适合单页应用根据 URL 切换不同的组件。

history.pushState({ data: "123" }, "标题", "/docs/videos/browser/urlsearchparams-api-tutorial/");
https://zxuqian.cn -> https://zxuqian.cn/urlsearchparams-api-tutorial/

pushState() 接收 3 个参数，历史状态对象、站点标题和要添加的 URL 路径：

history.pushState({ data: "123" }, "标题", "/docs/videos/browser/urlsearchparams-api-tutorial/");

其中前两个参数是可选的，并且第 2 个参数暂时还不能生效。

在历史记录新增一条记录之后，如果之后再发生了一次跳转，那么在后退的时候，会后退到新增的 URL 记录上。当前 URL 的状态对象可通过 history.state 来访问。

// https://zxuqian.cn
history.pushState(
  { data: "123" },
  "标题",
  "/docs/videos/browser/urlsearchparams-api-tutorial/"
);

// 再跳转
history.back();
// 再访问 state
history.state;

如果要在历史记录前进或后退的时候，访问状态对象，可以监听 window 的 onpopstate 事件：

window.onpopstate = (e) => {
  console.log(location.pathname, e.state);
};

history.pushState(
  { data: "123" },
  "标题",
  "/docs/videos/browser/urlsearchparams-api-tutorial/"
);
// 点击随便一个页面，跳转
history.back(); // -> /docs/videos/browser/urlsearchparams-api-tutorial/, {abc: 123}

Replace State

history 中的 replaceState() 与 pushState 类似，只是它是替换历史记录最新的一条记录，而不是添加一条。它接收的参数和 pushState 也一样。

history.replaceState(
  { data: "123" },
  "标题",
  "/docs/videos/browser/urlsearchparams-api-tutorial/"
);

如果在当前页面，调用 pushState() 追加一条新的记录，后又调用了 replaceState() 更改了 URL，那么当再跳转到一个新一个 URL 后，点击后退，会跳转到 replaceState() 中指定的记录，再点击后退则会回到一开始的 URL，pushState() 中的记录没有了。

// 当前 URL： https://zxuqian.cn/
history.pushState({}, "", "/docs/videos/browser/urlsearchparams-api-tutorial/");
history.replaceState({}, "", "/docs/videos/browser/what-is-bom");
// 随便点击一个页面
history.back(); // /docs/videos/browser/what-is-bom
history.back(); // 一开始的 url

ScrollRestoration

history 对象中还有一个 scrollRestoration 属性，如果它的值是 auto，那么在后退或前进的时候，会恢复页面上次滚动的位置，如果设置为 manual，滚动位置就不会再恢复了，可以自己自定义滚动恢复逻辑。

// 当前 URL： https://zxuqian.cn/
// 滚动一下
// 跳转到任何页面
history.back(); // 恢复了滚动位置

history.scrollRestoration = "manual";
// 滚动一下
// 跳转到任何页面
history.back(); // 没恢复滚动位置

小结

好了，这个就是浏览器 History API 的使用方法，你学会了吗？如果有帮助请三连，想学更多有用的前端开发知识，请关注峰华前端工程师，感谢观看！