vue页面返回只关闭弹窗,不后退页面路由vue-router

Demo 代码功能点

• vue-router.js实现手机点返回键，只关闭弹窗，页面不后退
• vue-router 用户在浏览器回退，只关闭弹窗，页面不后退
• vue js监听页面返回，不后退页面路由
• 点击浏览器返回按键，只关闭dialog对话框，不返回页面路由
• 手机SPA单页vue应用，全屏对话框弹出的时候，safari点击返回，只关闭弹窗，重写浏览器返回事件
• 监听chrome浏览器返回事件，重写页面返回行为，只关闭全屏对话框，不做history.back()
• vue-router beforeRouteLeave 禁止页面返回，停留当前页面
• vue-router beforeRouteLeave 阻止浏览器返回，保持当前路由不动

Demo 完整代码

<template>
  <div>
    <button @click="back">Back</button>

    <el-dialog class="configDialog" title="设置弹窗" :visible.sync="dialogVisible">全屏对话框</el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  // beforeRouteLeave 或 beforeRouteUpdate , 如果后退的页面只是参数变化，应该用 beforeRouteUpdate
  beforeRouteLeave(to, from, next) {
    // 有全屏弹窗的时候，只关闭弹窗，不返回页面
    // 没有弹窗的时候，正常返回页面（浏览器后退）
    if (this.dialogVisible) {
      this.dialogVisible = false;
      next(false);
    } else {
      next();
    }
  },
  methods: {
    back() {
      this.dialogVisible = true;
    }
  }
};
</script>

使用的依赖包、版本号信息

package.json
  dependencies
    "vue": "2.6.11",
    "vue-router": "3.1.6",

vue-router 重写浏览器返回事件，就轻轻松松解决了。有全屏弹窗的时候，只关闭弹窗，不返回页面；没有弹窗的时候，正常返回页面（浏览器后退）。

注意：如果 beforeRouteLeave 没有执行，一般是因为后退的页面只是参数变化，路由地址没边，这种情况，只会执行 beforeRouteUpdate ！