携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情
最近做了一个公众号中的h5项目，要求在页面返回到首页时（因项目需求，首页是一个中转页面，不适合单独展现），直接关闭窗口，回到公众号。接到这个需求时第一反应是中转页跳转时直接用router.replace不就行了吗，但经测试发现replace跳转在微信中并不起作用，中转页面并没有被替换掉，后来通过onBeforeRouteLeave方法检测页面才得以解决。下面我们来看下onBeforeRouteLeave方法的使用。
onBeforeRouteLeave
vue3 router中新增的onBeforeRouteLeave方法表示添加一个导航守卫，此方法会在组件将要离开的时候触发，类似于以前的beforeRouteLeave，但onBeforeRouteLeave可以在任何组件中使用，当组件被卸载的时候，导航守卫也将被移除。当我们使用router执行跳转或返回的时候，就会触发onBeforeRouteLeave方法，这时候就可以处理一些逻辑。
在开头中我们说的场景中，当从A页面返回到首页时，返回前会触发A页面当中写的onBeforeRouteLeave方法，这时候我们可以返回false来阻止返回并关闭窗口，回到公众号。如下代码：
onBeforeRouteLeave(to => {
if (to.path === '/index') {
wx.closeWindow()
return false
}
})
上述代码中会加一个to.path是否是首页index的判断，因为onBeforeRouteLeave方法在页面正常跳转的时候也会触发，所以要判断下只有在返回首页的时候才进行阻止。
如果我们只有一个页面需要返回到首页时特殊处理，那么上述方法就非常好用，但如果是多个页面呢，每个页面中都加入onBeforeRouteLeave方法来判断就比较麻烦了，这时候我们就可以在router中的beforeEach中进行处理。如下：
const pages = ['A', 'B']
router.beforeEach((to, from, next) => {
if(to.path === '/index' && pages.includes(from.path)) {
wx.closeWindow()
next(false)
}
})
如上代码，我们可以维护一个需要这种处理的页面列表，然后在beforeEach中判断一下如果是从这些页面返回到的首页，就直接关闭窗口即可。
或者，因为我们确定首页中转页只有从入口进入，其余到首页都是返回的情况下，就可以通过判断from.path是不是空路由/，来过滤掉入口进入的情况，其余情况就直接关闭即可，如下：
router.beforeEach((to, from, next) => {
if(to.path === '/index' && from.path!='/') {
wx.closeWindow()
next(false)
}
})
