前端 - history - 代码天地

本文链接： https://blog.csdn.net/kelly0721/article/details/102467770

一、History的几个基本方法

back()：回退到上一个访问记录; 在历史记录中后退：window.history.back();
forward()：前进到下一个访问记录; 在历史记录中前进：window.history.forward();
go(num)：跳转到相应的访问记录;其中num大于0，则前进;小于0，则后退; 例如：后退一页window.history.go(-1); 向前移动一页window.history.go(1);
pushState(stateData, title, url)：在history中创建一个新的访问记录，不能跨域，且不造成页面刷新;
replaceState(stateData, title, url)：修改当前的访问记录，不能跨域，且不造成页面刷新;

一些其他的方法：
.window.history.length：查看历史记录栈中一共有多少个记录点
window.onpopstate：当调用history.go()、history.back()、history.forward()时触发;pushState()\replaceState()方法不触发
window.onhashchange：当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发

二、浏览器history变化与浏览器的行为

在这里插入图片描述
如图，展示了初始长度为4的history栈，在不同操作方法下的变化情况，下面对每步进行分析：

step1～step4：均为history的访问方法，获取相应的历史记录中的url;
step5：通过location.href创建一个新的url记录，其将当前url2之后的记录清空，并在其后新增url5;history长度由4变成3;history的每次新增操作，都会将其后记录清空，在其后新增记录。
step6：通过pushState方法创建一个新的url记录，其也是清空、再新增记录;
step8：通过replaceState方法修改一个url记录，其不会产生新记录，而是将当前记录进行修改。
值得注意的是，通过pushState新增或者修改的history记录，被访问时，当前页面不刷新。而locaiton.href生成的记录被访问时，页面将进行刷新。

三、history.back()和history.go()的区别

back(): 返回上一页，原页表表单中的内容会保留； history.back():后退； history.back(0) 刷新； history.back(1)：前进
go(-1): 返回上一页，原页面表单中的内容会丢失；history.go(-1):后退+刷新；history.go(1) ：前进

四、React中的Link

// to为string
<Link to="/about">关于</Link>

// to为obj
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#hash',
  query: { state: true }
}}/>

Link 会被渲染成一个 a 标签，它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。当你点击Link时，url会更新，组件会被重新渲染，但是页面不会重新加载，虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截了浏览器的默认行为，然后调用了history.pushState 方法
Link使用to参数来描述需要定位的页面。它的值既可是字符串，也可以是location对象（包含pathname、search、hash、与state属性）如果其值为字符串，将会被转换为location对象
replace(bool)：为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址；为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false；

五、React 中的 history 对象

（注意，以下出现的 history 指的是通过 history 包里面的 create*History 方法创建的对象，window.history 则指定浏览器原生的 history 对象，由于有些 API 相同，不要弄混）

push方法

push方法使能你跳转到新的location。通过在当前location后添加新的location时，任意的’未来’location会被清除（之前由后退按钮而形成的在当前location后的location）。

默认情况下，当你点击时，会调用history.push方法进行导航。

history.push({ pathname: '/new-place' })

replace方法

replace方法与push相似，但它并非添加location，而是替换当前索引上的位置。'未来’location将不会被清除。

重定向时要使用replace。这也是React Router的组件中使用的方法。

例如，当你在页面1通过点击link按钮导航到页面2，页面2可能会重定向到页面3。如果使用push方法，点击返回按钮将从页面3返回到页面2（这里有潜在的可能再重定向到页面3）。如果使用replace方法，会从页面三直接返回页面1。

history.replace({ pathname: '/go-here-instead' })

监听

采用观察者模式，在location改变时，history会发出通知。每一个history对象都有listen方法，接受一个函数作为参数。这个函数会被添加到history储存的监听函数数组中。当location变化时（如代码调用history方法或用户点击浏览器按钮），history对象将会调用所有listener方法。这能让你在location变化时来设置代码更新。

const youAreHere = document.getElementById('youAreHere')
history.listen(function(location) {
  youAreHere.textContent = location.pathname
})

React Router的router组件将会订阅history对象，这样当location变化时，其能重新渲染。

前端 - history