前端路由一直都是我们单页面模式开发的重要组成部分,平时开发中会遇到路由的两种模式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