vue实现点击返回键关闭当前已打开弹窗并且禁止返回上一页。

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

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

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

<\/p>
当点击显示弹窗的时候，不仅要给 window.onCallBack 赋值个函数，还要跳转当前页面只是给地址多加个query的参数<\/h2>
跳转当前页面不会触发页面更新，会更新地址栏为了实现点击返回按键，不返回上一页，只是返回了地址栏上一次的query参数。<\/blockquote>
注意下方是顺序不能乱。<\/blockquote>
let query = JSON.parse(JSON.stringify(this.$route.query));\nlet path = JSON.parse(JSON.stringify(this.$route.path));\nquery.openPage = 1;\nthis.$router.push({\n  path,\n  query\n});\nwindow.onCallBack = () => {  \/\/ 这个是路由守卫那里的回调方法 来实现关闭弹窗\n  this.calendarShow = false;\n}\n<\/pre>

<\/p>
子组件这里也要做处理，当子组件里点击了关闭弹窗按钮等...就要使用一下方法来恢复默认位置\/数据。<\/h2>
先判断是否有没有打开弹窗<\/blockquote>
if(!this.$route.query.openPage ) return\n<\/pre>
要清空一下在window注册的事件<\/blockquote>
window.onCallBack = null;\n<\/pre>
当子组件里点击了关闭的按钮，要使用下面代码回退一下当前路由记录。<\/blockquote>
this.$router.go(-1);\n<\/pre>

<\/p>
注意上面两个的顺序一定不能乱。此方法逻辑，实现了路由监听返回上一个和点击返回键页面不返回上一页。你们可以自己做一下方法的封装。<\/blockquote>
为了防止点开弹窗后，用户刷新了页面还保留了当前打开弹窗query参数，我们可以在项目App.vue里使用下面方法。<\/h2>
判断如果有参数并且回调参数为undefined就把地址给重置，防止点击返回上一页，导致页面没回退。<\/blockquote>
      let query = JSON.parse(JSON.stringify(this.$route.query));\n      let path = JSON.parse(JSON.stringify(this.$route.path));\n      if(query.openPage&& !window.onCallBack) {\n        delete query.openPage;\n        this.$router.replace({\n          path,\n          query\n        })\n      }\n<\/pre>

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