History路由机制

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了History路由机制相关的知识，希望对你有一定的参考价值。

用户访问网页的历史记录通常会被保存在一个类似于栈对象中，即history对象，点击返回就出栈，跳下一页就入栈。 它提供了一些方法来操作页面的前进和后退：

  • window.history.back() 返回到上一个页面

  • window.history.forward() 进入到下一个页面

  • window.history.go([delta]) 跳转到指定页面

html5 对History Api 进行了增强，新增了两个Api和一个事件，分别是pushState、replaceState 和 onpopstate

pushState是往history对象里添加一个新的历史记录，即压栈。

replaceState 是替换history对象中的当前历史。

当点击浏览器后退按钮或js调用history.back都会触发onpopstate事件, 与其类似的还有一个事件: onhashchange 。

onhashchange是老API, 浏览器支持度高, 本来是用来监听hash变化的, 但可以被利用来做客户端前进和后退事件的监听，onpopstate是专门用来监听浏览器前进后退的, 不仅可以支持hash, 非hash的同源url也支持。

 

如下：

一、onhashchange 事件在当前 URL 的锚部分(以 ‘#‘ 号为开始) 发生改变时触发 。

锚部分的实例：指定当前 URL 为
http://www.example.com/test.htm#part2 - 这个 URL 中的锚部分为 #part2。

你可以使用以下方式调用事件:

1、通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分。
2、使用不同书签导航到当前页面（使用"后退" 或"前进"按钮）

3、点击链接跳转到书签锚

demo:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>

<body>

<p>该实例演示了如何使用 addEventListener()方法 向 body 元素中添加 "onhashchange" 事件。</p>
<p>点击按钮修改当前 URL 的锚部分为 #part5</p>
<button onclick="changePart()">点我</button>
<p id="demo"></p>
<script>
// 使用 location.hash 属性来修改锚部分
function changePart() {
location.hash = "part5";
var x = "锚部分现在为: " + location.hash;
document.getElementById("demo").innerHTML = x;
}
window.addEventListener("hashchange", myFunction);
function myFunction() {
alert("锚部分已修改！");
}

</script>

</body>

</html>

二、window.onpopstate是popstate事件在window对象上的事件处理程序.

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在javascript中调用history.back()、history.forward()、history.go()方法).

当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.

语法：window.onpopstate = funcRef;   funcRef 是个函数名.

demo: 

假如当前网页地址为http://example.com/example.html,则运行下述代码后

window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数.
history.pushState({page: 1}, "title 1", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
//history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
//history.back(); // 弹出 "location: http://example.com/example.html, state: null
//history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

即便进入了那些非pushState和replaceState方法作用过的(比如http://example.com/example.html)没有state对象关联的那些网页, popstate事件也仍然会被触发.

以上是关于History路由机制的主要内容，如果未能解决你的问题，请参考以下文章

路由 前后端渲染 url hash 和 html5 history

前端路由机制

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

mode: 'history', 去掉路由地址的#