js控制路由改变却不刷新页面-CFANZ编程社区

window.history

我们可以通过window.history的两个方法来控制浏览器的路由改变，但不会让浏览器刷新页面。

pushState

会追加浏览器的路由历史，但不会刷新页面，可以用这种方式来实现前端路由的控制。

history.pushState(state, title[, url])

可以传递三个参数，state，
需要传递的参数，当监听到浏览器的路由活动历史记录条目更改时，可以获取到这个参数。
title 当前大多数浏览器都忽略此参数，在此处传递空字符串应该可以防止将来对方法的更改。或者，您可以为要移动的状态传递简短的标题。
url 在当前host之后新增的路由地址，

// 如果当前的域名是 www.baidu.com
const state = { name: 'dx', age: 18 }
const title = ''
const url = '/about'

const result = history.pushState(state, title, url)
// 路由将会改变为www.baidu.com/about

replaceState

history.replaceState(stateObj, title[, url]);

和pushState的用法一致，不同的是，它会改变当前路由，不会追加浏览器路由的历史记录，同样也不会刷新页面

popstate

当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。

但是，调用replaceState或者pushState不会触发popstate的监听。
replaceState和pushState是创建popstate监听的条件，通过replaceState和pushState设置state对象，而当浏览器通过其它方式（比如 history.back()或者history.forward()方法）跳转到对应的url时，可以通过popstate监听函数的参数，拿到被设置的state对象。

window.addEventListener('popstate', function (e) {
    console.log(e.state)
},false)

const state1 = { name: 'dx', age: 18 }
const title = ''
const url = '/about'

history.pushState(state1, title, url)

history.back()
// 先后退到之前的路由，会打印一次state,但此时的路由没有通过pushState或者replaceState设置state,所以
// null
history.forward()
// 再次回到about路由时，又会打印一次state
// { name: 'dx', age: 18 }