vue中通过history api拦截浏览器的前进后退按钮事件

Posted 2023-03-14

参考技术A

现在 vueRouter 的模式基本都是 history 模式，它的实现是基于原生事件 popstate 来实现的。
先看看 MDN 文档对这个 api 的解释：

也就是说我们点击浏览器的前进、后退按钮或者在 js 中执行 history.back() 、 history.forward() 就会触发 popstate 事件。

那这个 api 和 vueRouter 的 history 模式有什么关系呢？
我们知道vue项目其实是个单页应用，大致结构如下：

所以我们在项目中各种跳转切换页面，都不会去请求 html 资源，都是在一个 html 中完成 dom 切换，也就是更换 route-view 标签里面的内容，但是我们却可以通过浏览器的前进后退按钮进行页面切换，实现的关键就是去监听 popstate 事件，根据相关信息去更换 route-view 标签里面的内容。

到这里需要再介绍一个 api ， history.pushstate
同样看一下 MDN 文档的介绍：

这个 api 会往浏览器的历史栈添加一个状态，举个不太切当的例子：
比如现在在A页面，然后从A页面跳转到B页面，然后在B页面执行 history.pushState() ，此时点击浏览器的后退按钮不会返回A页面，而还是在B页面。

两个 api 的 MDN 文档，推荐看一遍哦：
popstate
history.pushState

所以 vueRouter 的 history 模式简单来说就是监听 popstate 事件，去执行切换显示 dom 的事件；然后当路由切换时，执行了 history.pushState() ，然后手动触发一遍切换显示 dom 的事件。

现在回到标题，在 vue 中如何拦截浏览器的前进后退按钮呢？最近刚好遇到一个需求，需要此功能来实现：
有一个列表组件 list ：

列表页有很多数据，每条数据只展示基础信息，然后点击每条 item ，要展示每条 item 的详情，跳转到详情页。
这种需求非常常见，也有很多种办法实现，比如动态路由，但是如果是动态路由，那么返回列表页的时候，列表页就会刷新，在没有 keep-alive 的情况。交互不太友好，我一般都是通过组件切换去实现：

列表通过 v-show 显示隐藏，详情组件通过 v-if 来触发初始化。但这样写又有一个问题，当显示详情页的时候，通过浏览器的后退按钮是回不到列表页的，因为他们在同个组件同个路由中，只能通用自己写的返回按钮来实现，为了考虑用户习惯的行为，就要实现在详情组件中点击后退按钮时能返回到列表页。

结合上面所说，在进入详情组件的时候，把这个行为当成进入一个新页面，所以就要往浏览器会话的历史堆栈中添加一个状态：

history.state 储存了当前浏览器会话的信息，包括前进是什么状态，后退是什么状态，上面例子中我往里面添加了一个 id ； history.pushState 有三个参数，第一个参数就是 state ，第二个参数可以忽略，第三个参数 url 可选， vueRouter 的切换就是通过第三个参数来指定，如果不传第三个参数，当前 url 就不会改变。

当执行了上面的 goDetail 方法后，就会显示详情组件。假如列表页的路由的 /list ，从 /home 路由跳转过来的，那当显示详情页的时候，点击浏览器的后退按钮，因为已经执行了 history.pushState ，所以不会返回到 /home 路由，还是在 /list 路由。
那么怎么实现当在详情组件的时候，点击后退按钮隐藏详情组件，显示列表呢？
这时候就需要监听 popstate 事件了，我在 history.pushState 的时候，往 state 中添加了一个标识， key 为 id ，通过判断是否有这个标识来切换组件：

当显示详情组件的时候，点击后退按钮，触发了 popstate 事件， history.state 回到未执行 history.pushState 的状态，也就是 history.state 没有 id 这个标识，所以会隐藏掉详情组件；此时，再点击浏览器的前进按钮， history.state 就会返回到执行了 history.pushState 的状态，有 id 这个标识，就会显示详情组件。
这样就显示了通过浏览器的前进后退来控制同个路由下组件的切换。

本文基于在一个组件中切换列表与某条数据的详情需求来说，对于涉及到的两个 history api 还有很多理解不足的地方，如果你有更好的见解，请指教。

我是鸭子，祝你幸福。