当前位置: 首页 > Web前端 > JavaScript

window.history对象分析

时间:2023-03-26 20:10:54 JavaScript

history.gohistory.go支持传入参数。该参数可以是一个整数(n),表示前进或后退n步。如果这个整数太大或太小,如果历史上没有那么多步,它都没有效果。此参数也可以是字符串。匹配历史上的第一个位置。如果没有匹配,它将没有效果。history.back和history.forward就是这么命名的,这两个方法模拟了浏览器的后退和前进按钮。history.length表示历史记录的条数。如果是新窗口history.length=1,history.pushState和history.replaceState都接受三个参数:1.state:一个状态对象2.title:一个标题,这个参数暂时没有实际作用3.url(可选):同源网址。不传则默认当前url。修改location.hash、pushState、replaceState会将页面一个新的状态推送到历史记录中,地址栏也会发生变化,但页面不会向服务器发送请求。popState事件pushState,replaceState不会触发popState事件。1.如果浏览器的前进和后退按钮改变了页面的状态,就会触发popState事件。比如你之前通过pushState推送了一个新的state,然后你点击返回按钮触发了popState事件2.修改hash也会触发popState说下面的路由在vueRouter中跳转监听push,replace和vueRouter提供的路由链接。它使用pushState和replaceState方法来推送新状态的历史记录,因此不会触发页面刷新。Hash方式手动修改hash,比如修改地址栏中的hash会触发vueRouter中定义的popState来更新页面。当历史中有状态时,前进后退也会触发vueRouter中定义的popState来更新页面。但是直接修改url地址或者刷新是不会触发popState的,会请求服务器资源。所以在历史模式下,刷新有时会导致404