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


有个需求就是当当前页点开了弹窗,按手机的物理返回键,关闭弹窗而不是返回上一页。

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

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
        })
      }


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

886

声明:Web前端小站 - 前端博客 - 王搏的个人博客|版权所有,违者必究|如未注明,均为原创

转载:转载请注明原文链接 - vue实现点击返回键关闭当前已打开弹窗并且禁止返回上一页。

评论
孙瑞杰生日