window.history对象解析

history.go

history.go支持传入一个参数。

这个参数可以是一个整数(n),表示前进或者后退n步。如果这个整数过大或者过小,历史记录中没有这么多步就没有什么效果

这个参数也可以是一个字符串。匹配历史记录中第一个位置。如果没有匹配项就不会有什么效果

history.back和history.forward

故名思议,这两个方法模拟了浏览器的后退和前进按钮。

history.length

表示历史记录的条数,如果是一个新窗口history.length=1

history.pushState 和 history.replaceState

它们都接受三个参数:

1. state:一个状态对象
2. title:一个标题,这个参数暂时还没有实际作用
3. url(可选):一个同源的url,如果没有传就默认当前url

修改location.hash、pushState、replaceState都会将该页面的一种新状态推进历史记录,地址栏也会改变,但是页面不会向服务器发送请求。

popState事件

pushState、replaceState不会触发popState事件。
1、如果浏览器的前进,后退按钮改变了页面的状态就会触发popState事件。比如你前面通过pushState推入一条新状态,然后你点击后退按钮就会触发popState事件
2、修改hash也会触发popState

说以下vueRouter中的路由跳转和监听

vueRouter提供的push和replace以及route-link都是利用了pushState和replaceState方法推送新状态的历史记录,所以不会触发页面刷新。
hash模式手动修改hash,比如在地址栏中修改hash就会触发vueRouter中定义好的popState从而更新页面。
当历史记录中有状态时前进后退也会触发vueRouter中定义好的popState从而更新页面。
而直接修改url地址或者刷新的话是不会触发popState,并且会去请求服务器资源。所以history模式下,刷新有时会导致404

你可能感兴趣的:(window.history对象解析)