vue-router 清除中间历史页面栈并重新push页面

背景

有时路由跳转存在下面问题
A页面->B页面->C页面->D页面->E页面

当前页面是D页面，我们希望跳转到E页面后，E页面返回（浏览器自带返回按钮）跳转到B页面

注：这里的返回不是通过js代码。js代码可以跳转到任何页面，不存在上面问题哈。这里的返回是手机自带返回，或者电脑左上角自带返回
比如谷歌浏览器

 

问题解决

经过查询vue-router提供的方法，目前未能找到直接可行的方式。后面无奈只能曲线救国方式，思路是这样的：

E页面跳转到B页面时不要直接用push跳转，一旦跳转页面栈是这样的:

A页面->B页面->C页面->D页面->E页面

既然是曲线救国方式，D页面先调用 router.go(-2)退回到B页面。这个时候的历史栈最上层就在B页面，然后B页面再跳转到E页面。这个时候的页面栈就变成了这样的:

A页面->B页面->E页面

注：B页面自动跳转需要判断页面是从D页面退回来的，才执行自动跳转。而这一块其实是不属于B页面的业务逻辑，所以这一块的自动跳转不应该写在B页面。最后我们选择router.afterEach方式判断注意这里不能用router.beforeEach

所以最终解决方案是这样的：

先跳转页面退回

router.go(-2)

然后全局监听

// 解决跳转到E页面后，返回又变成了D页面，这里需要返回到B页面
router.afterEach((to, from) => {
    if (from.fullPath.indexOf('/D页面') > -1) {
        if (to.fullPath.indexOf('/B页面') > -1) {
            router.push("/E页面");
        }
    }
});

 

效果

虽然中间曲折了点，但是效果很好。可以说无感，就和D页面直接push到E页面一样的体验效果，不存在中间跳转问题