vue中通过history api拦截浏览器的前进后退按钮事件
发布网友
发布时间：2022-09-07 13:46
共1个回答
热心网友
时间：2024-11-25 10:05
现在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还有很多理解不足的地方，如果你有更好的见解，请指教。
我是鸭子，祝你幸福。
