vue-router路由模式详解(小结)

2020-06-12 21:22:27易采站长站整理

1、如果被激活的历史记录条目是通过对 history.pushState() 的调用创建的,或者受到对 history.replaceState() 的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。

2、需要注意的是调用 history.pushState() 或 history.replaceState() 用来在浏览历史中添加或修改记录,不会触发popstate事件;

只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back())

我们测试一下:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>测试一下</div>
<script type="text/javascript">
if (window.history && window.history.pushState) {
window.onpopstate = function(event) {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
//window.history.go(1)
//window.history.back()
};

//window.addEventListener("popstate", function(e) {
// window.location = 'http://www.baidu.com';
//}, false);

!function() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}();
}
</script>
</body>
</html>

刷新时不打印,刷新多次,再后退,每次都有,直到为null