通过window的popstate事件可未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net以监听history的变化，但是，“po本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。pstate会在浏览器前进后退操作、hi本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】story.go/back/forwar转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netd调用、hashchange的时候触发”【本文首发于唐霜的博客】未经授权，禁止复制转载。，它是一个复合事件，你根本判断不了到底是【转载请注明来源】本文版权归作者所有，未经授权不得转载。哪种情况引起的popstate。更难理解【转载请注明来源】未经授权，禁止复制转载。的是，我不知道为什么要把forward也本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】设计为popstate，pop这个词的意未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。思不就是从stack顶把最上面的一个从栈本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】中移除么？forward明显是push的【未经授权禁止转载】【原创内容，转载请注明出处】行为，怎么也放到popstate里面。这本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net个事件明显是有设计缺陷的。回到题目，我们转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】怎么去判断用户是点击了“退回”按钮？

我们要用到一些取巧的办法。具体我总结为3【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net步：

• 充实history stack，以提供更转载请注明出处：www.tangshuang.net【作者：唐霜】多信息让我们可以在用户刷新浏览器的情况下【版权所有，侵权必究】【本文首发于唐霜的博客】，仍然获得上下页信息关联
【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】
• 为history创建一个私有的记录值，用转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。以区分history当前的state和上【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】一个state（我们在事件回调中只能拿到本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net当前state）
【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net
• 通过第一步和第二步铺垫的内容，在回调函数【原创不易，请尊重版权】【转载请注明来源】中进行判断，从而判断是否是用户点击了“退【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。回”按钮
【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【原创内容，转载请注明出处】原创内容，盗版必究。

接下来我们进行实施。在此之前，我们需要了【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。解一些简单的知识。history是浏览器【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】用户记录用户浏览器历史的全局对象，既然是【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】“浏览历史”，那么就是一组单一数据的列表【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】（有顺序），这个所谓单一数据，就是其内部未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。的state概念，一个state表示用户本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。在浏览一个界面（对应一个url）时留下的著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net痕迹，不过，这个state必须由开发者定【作者：唐霜】【转载请注明来源】义，如果开发者不定义，那么state就是【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】null，而且为null的时候，就没哟意【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。义。注意，浏览器不会主动帮你记录当前的u【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。rl，虽然它自己记录在了浏览器内部，你可【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。以通过浏览器的“浏览历史”功能查看，但是【作者：唐霜】著作权归作者所有，禁止商业用途转载。，你无法在代码层面直接读取这些历史记录，【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】你只能读取history当前的state本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net，即通过 window.history.state 来读取，当然，你也可以通过 转载请注明出处：www.tangshuang.netwindow.location 来读取当前的url信息。“只能读取当前著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】的”，也就意味着这是一种栈结构的数据管理【转载请注明来源】【本文首发于唐霜的博客】，而且，这个栈在用户刷新当前浏览器tab【转载请注明来源】【关注微信公众号：wwwtangshuangnet】时，仍然是维持的。

基于这一特性，我们可以自己在state栈本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。中，构建一个链表结构，从而可以读取整个栈【转载请注明来源】【本文受版权保护】内的state链。具体怎么做呢？

我们知道history有pushStat著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。e和replaceState两个接口，对【转载请注明来源】【作者：唐霜】于SPA应用而言，整个应用中只会使用pu【版权所有】唐霜 www.tangshuang.net【转载请注明来源】shState和replaceState转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】两个接口进行url的跳转（还有一种是在a【转载请注明来源】【原创内容，转载请注明出处】标签href中使用#触发，例如 <a href="#/base/xxx"> 这种也可以做到无刷新的界面跳转，但是由【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。于它走另外一个体系，也就是hashcha【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】nge的体系，是比较老的技术，现在大部分转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】框架都是基于state的体系来做，因此，【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。我们本文不考虑hashchange这种方【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】案），因此，我们可以对这两个接口进行改造转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，从而在跳转时，对state进行信息充实【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】。

const originalPushState = history.pushState.bind(history);

// 要求在调用pushState时state必须是一个对象
history.pushState = function(state, title, url) {
  const { state: currentState } = history; // 获取未跳转之前的state，也就是当前的state
  const nextState = state || {};
  nextState.prevState = currentState;
  originalPushState(nextState);
};

通过这一改造，我们重写了history.原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。pushState，这样我们就让每一个被著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netpush到state栈中的state拥有【本文受版权保护】【版权所有，侵权必究】了prevState属性，通过该属性就可未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net以形成一条反向链表，用以追踪state之【转载请注明来源】【本文受版权保护】间的关系。

接下来，我们创建一个私有的变量，用来记录【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。history.state发生变化前的s本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。tate.

let latestState = history.state;

window.addEventListener('popstate', () => {
  const prevState = latestState;
  const { state } = history;
  latestState = state;
  ....
})

在每一次popstate被触发时，我们去【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。修改latestState，这样，我们就原创内容，盗版必究。【原创内容，转载请注明出处】可以记录在state发生变化前的stat【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】e是哪一个。

最后，我们通过latestState和当著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net前的state进行对比，来猜测用户是否点【转载请注明来源】【本文受版权保护】击了“退回”按钮。

window.addEventListener('popstate', () => {
  const currentState = latestState;
  const { state: nextState } = history;
  latestState = nextState;

  if (currentState?.prev === nextState) {
    // 用户点击了“退回”按钮
  }
})

当变化后的state正好是变化前stat【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。e.prev时，我们就认为用户点击了“退著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。回”按钮。当然，这里有一个点需要提前预设【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。，因为在不同的SPA框架中，触发pops著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】tate的可能包含在代码中调用histo【作者：唐霜】未经授权，禁止复制转载。ry.back()和history.go本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】(-1)的情况，所以，在代码层面，需要继【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】续去区分到底是程序里调用.back还是用未经授权，禁止复制转载。【版权所有，侵权必究】户点击“退回”按钮。区分方法也很简单，你著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。可以重写back和go方法，在里面做一个【关注微信公众号：wwwtangshuangnet】【本文受版权保护】标记，从而在判断时增加对该标记的判断。