window.history对象

1. 只读属性

1. length

表示当前窗口访问过的url的数量；或者手动pushState之后的length。

2.state

表示当前地址栏中网址对应的状态。

2. 方法

1. 刷新网页-back()、forward()、go(num)

1. 回退一个地址，相当于浏览器的后退键；对第一个网址无效

history.back() 
// 或者
history.go(-1)

2. 前进一个地址，相当于浏览器的前进键；对最后一个网址无效

history.forward()
// 或者
history.go(1)

3. 根据参数大小进行前进或者回退的个数

go(n);
当n>0时，前进n个历史记录；当n>history.length时，失效。
go(0)； 刷新当前页面
当n<0时，后退n个历史记录；当n>history.length时，失效。

2.不刷新网页-pushState()

可以改变当前地址栏的url，且在历史记录中添加一条；但是不会刷新页面。

window.history.pushState(state, title, url)
//  state是一个和url关联的值，在popstate事件中可能有用
//  title一般空字符串，也可以设置一个其他值
//  url可以只写域名后面的部分，表示在当前域名下修改；也可以写绝对路径

而且，pushState也不会触发popstate, hashchange事件。

为了安全，url只能是同域名网址。

3. 不刷新页面-replaceState(state,title,url)

功能是修改history对象的当前记录。其他参数和pushState相同。

它也不会刷新页面，不会触发popstate, hashchange监听事件。

3. 事件

浏览器路由有两种。HashRouter和BrowserRouter。浏览器中监听这两种路由变化的事件对应也有两种。

1. popstate事件

监听browserRouter的变化。

顾名思义，它只监听history的出栈的操作。history.pushState()方法入栈，每调用一次增加一条history。而出栈是指访问所有history列表中出现过的路由。

而访问历史记录触发popstate事件，只能通过以下两种方式。

触发方式

1）手动单击浏览器前进后退按钮

2）代码调用history.back(), history.forward(), history.go(n)

应用

可以通过自定义的pushState方法, onpopstate事件,监听实现不刷新页面根据browserRouter更改页面内容的功能。

<body>
  <input />
  <button onclick="push('/a')">/a</button>
  <button onclick="push('/b')">/b</button>
  <button onclick="push('/c')">/c</button>
  <div id="content" style="border: 3px solid red;  300px; height: 300px"></div>
  <script>
    const content = document.getElementById('content');
    function push(url) {
      // 该方法本身只能实现路由的变化，无法改变页面内容
      // 需要修改该方式实现修改页面的功能
      window.history.pushState({to: url}, null, url);
    }
    // 入栈通过history.pushState()方法
    // 出栈触发通过浏览器前进后退键；或者history.back()/history.forward()/history.go()
    window.onpopstate = function(e) {
      content.innerHTML = `页面${e.state.to}`
    }
    let oldPushState = window.history.pushState;
    window.history.pushState = function(state, title, url) {
      // 覆写方法时，一定要注意可能发生this变化
      oldPushState.call(window.history, {to: url}, null, url);
      content.innerHTML = `页面${state.to}`;
    }
  </script>
</body>

2. hashchange事件

监听hashRouter的变化。路由改变不会刷新页面，只修改hash值关联的内容。

根据hashChange事件的监听，修改hash值对应的页面的内容。

<body>
  <a href="#a">跳转到a</a>
  <a href="#b">跳转到b</a>
  <div id="content" style="border: 3px solid red;  300px; height: 300px"></div>
  <script>
    window.addEventListener('hashchange', (e) => {
      const content = document.getElementById('content');
      content.innerHTML = `这是页面${window.location.hash.slice(1)}`
    })
  </script>
</body>

触发方式：

1）手动单击浏览器前进后退键过程中，如果有hash内容变换，触发

2）history.back(), history.forward(), history.go(n)同理

3) 手动点击hash链接

4) 给window.location.hash赋值

location.hash = 4