现在vueRouter的模式基本都是history模式，它的实现是基于原生事件popstate来实现的。
先看看MDN文档对这个api的解释：
当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对
history.pushState()的调用创建的，或者受到对history.replaceState()的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。
需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）
也就是说我们点击浏览器的前进、后退按钮或者在js中执行history.back()、history.forward()就会触发popstate事件。
那这个api和vueRouter的history模式有什么关系呢？
我们知道vue项目其实是个单页应用，大致结构如下：
<html>
<body>
<div id="app">
<router-view />
</div>
</body>
</html>
所以我们在项目中各种跳转切换页面，都不会去请求html资源，都是在一个html中完成dom切换，也就是更换route-view标签里面的内容，但是我们却可以通过浏览器的前进后退按钮进行页面切换，实现的关键就是去监听popstate事件，根据相关信息去更换route-view标签里面的内容。
到这里需要再介绍一个api，history.pushstate
同样看一下MDN文档的介绍：
在 HTML 文档中，
history.pushState()方法向当前浏览器会话的历史堆栈中添加一个状态（state）。
语法：history.pushState(state, title[, url])
这个api会往浏览器的历史栈添加一个状态，举个不太切当的例子：
比如现在在A页面，然后从A页面跳转到B页面，然后在B页面执行history.pushState()，此时点击浏览器的后退按钮不会返回A页面，而还是在B页面。
两个api的MDN文档，推荐看一遍哦：
popstate
history.pushState
所以vueRouter的history模式简单来说就是监听popstate事件，去执行切换显示dom的事件；然后当路由切换时，执行了history.pushState()，然后手动触发一遍切换显示dom的事件。
现在回到标题，在vue中如何拦截浏览器的前进后退按钮呢？最近刚好遇到一个需求，需要此功能来实现：
有一个列表组件list：
<template>
<div class="list">
<Item />
<Item />
<Item />
...
</div>
<template/>
列表页有很多数据，每条数据只展示基础信息，然后点击每条item，要展示每条item的详情，跳转到详情页。
这种需求非常常见，也有很多种办法实现，比如动态路由，但是如果是动态路由，那么返回列表页的时候，列表页就会刷新，在没有keep-alive的情况。交互不太友好，我一般都是通过组件切换去实现：
<template>
<div class="list" v-show="!showDetail">
<Item />
<Item />
<Item />
...
</div>
<Deatil v-if="showDetail" />
<template/>
列表通过v-show显示隐藏，详情组件通过v-if来触发初始化。但这样写又有一个问题，当显示详情页的时候，通过浏览器的后退按钮是回不到列表页的，因为他们在同个组件同个路由中，只能通用自己写的返回按钮来实现，为了考虑用户习惯的行为，就要实现在详情组件中点击后退按钮时能返回到列表页。
结合上面所说，在进入详情组件的时候，把这个行为当成进入一个新页面，所以就要往浏览器会话的历史堆栈中添加一个状态：
// 显示详情组件的事件
// id是每一条数据的id，或者是一个标识
const goDetail = (id) => {
showDetail = true
history.pushState({ ...history.state, id }, '')
}
history.state储存了当前浏览器会话的信息，包括前进是什么状态，后退是什么状态，上面例子中我往里面添加了一个id；history.pushState有三个参数，第一个参数就是state，第二个参数可以忽略，第三个参数url可选，vueRouter的切换就是通过第三个参数来指定，如果不传第三个参数，当前url就不会改变。
当执行了上面的goDetail方法后，就会显示详情组件。假如列表页的路由的 /list，从 /home路由跳转过来的，那当显示详情页的时候，点击浏览器的后退按钮，因为已经执行了history.pushState，所以不会返回到/home路由，还是在/list路由。
那么怎么实现当在详情组件的时候，点击后退按钮隐藏详情组件，显示列表呢？
这时候就需要监听popstate事件了，我在history.pushState的时候，往state中添加了一个标识，key为id，通过判断是否有这个标识来切换组件：
onMounted(() => {
window.addEventListener('popstate', toggleDetailShow)
})
const toggleDetailShow = () => {
if (history.state.id) {
showDetail = true
} else {
showDetail = false
}
}
当显示详情组件的时候，点击后退按钮，触发了popstate事件，history.state回到未执行history.pushState的状态，也就是history.state没有id这个标识，所以会隐藏掉详情组件；此时，再点击浏览器的前进按钮，history.state就会返回到执行了history.pushState的状态，有id这个标识，就会显示详情组件。
这样就显示了通过浏览器的前进后退来控制同个路由下组件的切换。
本文基于在一个组件中切换列表与某条数据的详情需求来说，对于涉及到的两个history api还有很多理解不足的地方，如果你有更好的见解，请指教。
我是鸭子，祝你幸福。
网友评论