跳到主要内容位置

浏览器 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 的使用方法,你学会了吗?如果有帮助请三连,想学更多有用的前端开发知识,请关注峰华前端工程师,感谢观看!