关于浏览器前进后退按钮

Question

这是我做的一个路由拦截，判断是否跳转，但是当点击浏览器后退按钮后，弹窗闪了一下又消失了但是地址栏发生变化，第二次点击后退按钮弹窗出现，没有问题请教各位大佬怎么解决第一次弹窗闪现问题

Answer 1

next(false)才能起到拦截作用，你看看拦截的时候next函数的参数是不是false,根据截图的部分看不出来

Answer 2

`<template>

<el-buttontype="text" @click="open">点击打开 Message Box</el-button>

</template>

<script>

exportdefault{

beforeRouteLeave(to, from, next) {

this.open()

      .then(() => {

this.$message({

          type:"success",

          message:"已经跳页!"

        });

next();

      })

      .catch(() => {

this.$message({

          type:"info",

          message:"还在原来的页面"

        });

next(false);

      });

  },

mounted() {

if (window.history&&window.history.pushState) {

window.addEventListener("popstate", this.goBack, false);

    }

  },

  methods:{

asyncopen() {

returnawaitthis.$confirm("是否不保存就跳页", "提示", {

        confirmButtonText:"确定",

        cancelButtonText:"取消",

        type:"warning"

      });

    },

goBack(){

window.history.pushState(null, null, document.URL.split('/')[0]+this.$route.path);

    }

}

};

</script>`

Answer 3

请问你的问题解决了吗？我出现了和你相同的问题，使用了next(false)阻止路由的改变，但是我多次点击浏览器的后退，location.url发生改变了，浏览器的title也变化，并且弹窗闪退
beforeRouteLeave(to, from, next) {

if (to.path === '/login') {
  this.$iviewConfirm.Modal.remove()
  next()
  return
}
const { componentCloseFun, componentName } = this.buildCubeView
if (
  componentName &&
  typeof this.buildCubeView.componentCloseFun === 'function'
) {
  if (componentName === 'boardDesign') {
    this.$iviewConfirm(this.$t('views.tableTipsConfirmTitle'))
      .then(() => {
        componentCloseFun()
      })
      .catch(() => {})
  } else {
    componentCloseFun()
  }

  next(false)
} else {
  next()
}

},