一文带你真正了解histroy

序言

前端路由一直都是我们单页面模式开发的重要组成部分，平时开发中会遇到路由的两种模式hash和history,只知道history模式下刷新页面会 404，显示在页面上没有hash的#那么丑陋，那么history的基础知识和history有什么特点一直都是云里雾里的，小编这里总结了一下，希望能帮到你们，如果喜欢的话，可以帮忙点个赞 ?。

正文

History[1]这个接口的主要内容如下:

interface History {
  readonly attribute unsigned long length;
  attribute ScrollRestoration scrollRestoration;
  readonly attribute any state;
  void go(optional long delta = 0);
  void back();
  void forward();
  void pushState(any data, DOMString title, optional USVString? url = null);
  void replaceState(any data, DOMString title, optional USVString? url = null);
};

history.length

浏览器会话历史记录的条数,我们每次访问浏览器的时候,浏览器会按照时间的顺序把访问的页面放到历史记录里面，而且每个次都会有一个索引，默认是从0开始依此类推,所以我们刚开打浏览器控制台输出的length是1。

history . scrollRestoration

返回会话历史记录中当前条目的滚动恢复模式。有两个可取的值:

auto(默认) 在返回历史记录的时候会恢复用户已滚动到的页面上的位置

manual 在返回历史记录的时候不会还原用户已滚动的页面位置上,用户必须手动滚动到该位置

源码:

/**
*index.html
**/
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="height:1500px;border:1px solid;">
        <div style="margin-top: 1300px;" onclick='window.location="index2.html"'>见底了</div>
    </div>
    <script src="./index.js"></script>
</body>
</html>
------------------
/**
*index.js
**/
if (history.scrollRestoration) {
    history.scrollRestoration = 'manual';
}
-----------------
/**
*index2.html
**/
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div >
        页面2
    </div>
</body>
</html>

history.state

history.state是一个状态对象,在没有使用pushState()或者replaceState()的之前默认是null,如果不使用可以设置为null

history . back()

这个方法是返回会话历史记录中的上一个页面，如果没有上一页面，什么都不做。返回页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页

history.forward()

这个方法是会话历史记录向前移动一个页面，如果没有页面，什么都不做。返回页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页

history .go(delta)

从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于delta参数的值。如果超出特定页面什么也不做,如果delta是0相当于localtion.reload刷新当前页面。

history .pushState(data,title,url)

将给定数据推送到会话历史记录中，包括给定的标题，如果提供给定的 URL，则为非空。在使用 pushState 的方法的之后，我们只是在浏览器的历史记录中添加了一条记录，并没有刷新页面，没有看到跳转新页面的内容，只是浏览器的地址变了

当然它也不会判断你这个页面有没有,但是刷新的时候,会报错。

同时虽然我们设置了hash值，但是pushState这个方法不会触发window.onhashchange事件。

同时也不会触发window.onpopstate事件，我们需要点击前进或者后退的按钮才能触发window.onpopstate事件，当然也可以直接修改 history.state 去触发

当然如果我们设置的 url 和原地址不同源的话会报错，我们不能把在别人家吃饭，当作在自己家吃饭一样是吧。

history.replaceState(data,title,url)

修改会话历史记录，包括给定的标题，如果提供给定的 URL，则为非空replaceState 这个方法在调用的时候和 pushState 这个方法一样，不会检查路径是否存在也不会刷新页面,只是浏览器显示的地址变化了，如果中间调用了 pushState 方法，浏览器地址也不会显示，只会显示最后的结果。

同时也不会触发window.onpopstate事件，我们需要点击前进或者后退的按钮才能触发window.onpopstate事件，当然也可以直接修改 history.state 去触发

结尾

以上就是全部内容，欢迎评论指点，一起交流一起进步

参考资料

[1]

history: https://html.spec.whatwg.org/multipage/history.html#the-history-interface