首先，我们要在路由守卫那里做是否返回了上一页的判断

window.onCallBack 是点击打开弹窗时，需要使用的回调方法。

let from_fullPath = ''; // 记录要离开的地址，后面跟要去的地址做判断是否是返回上一页
router.beforeEach(function (to, from, next) {
  if(from_fullPath === to.fullPath && window.onCallBack) { // 说明是关闭弹窗
    window.onCallBack(); // 调用关闭弹窗的回调函数
    window.onCallBack = null; // 用完就清理
    from_fullPath = '';
  } else {
    from_fullPath = from.fullPath;
  }
  next()
})

当点击显示弹窗的时候，不仅要给 window.onCallBack 赋值个函数，还要跳转当前页面只是给地址多加个query的参数

跳转当前页面不会触发页面更新，会更新地址栏为了实现点击返回按键，不返回上一页，只是返回了地址栏上一次的query参数。

注意下方是顺序不能乱。

let query = JSON.parse(JSON.stringify(this.$route.query));
let path = JSON.parse(JSON.stringify(this.$route.path));
query.openPage = 1;
this.$router.push({
  path,
  query
});
window.onCallBack = () => {  // 这个是路由守卫那里的回调方法 来实现关闭弹窗
  this.calendarShow = false;
}

子组件这里也要做处理，当子组件里点击了关闭弹窗按钮等...就要使用一下方法来恢复默认位置/数据。

先判断是否有没有打开弹窗

if(!this.$route.query.openPage ) return

要清空一下在window注册的事件

window.onCallBack = null;

当子组件里点击了关闭的按钮，要使用下面代码回退一下当前路由记录。

this.$router.go(-1);

注意上面两个的顺序一定不能乱。此方法逻辑，实现了路由监听返回上一个和点击返回键页面不返回上一页。你们可以自己做一下方法的封装。

为了防止点开弹窗后，用户刷新了页面还保留了当前打开弹窗query参数，我们可以在项目App.vue里使用下面方法。

判断如果有参数并且回调参数为undefined就把地址给重置，防止点击返回上一页，导致页面没回退。

      let query = JSON.parse(JSON.stringify(this.$route.query));
      let path = JSON.parse(JSON.stringify(this.$route.path));
      if(query.openPage&& !window.onCallBack) {
        delete query.openPage;
        this.$router.replace({
          path,
          query
        })
      }

给大家提供一个实现的思路，后续的优化封装还得自己来。