当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题

当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题

问题描述：项目有这个需求，当页面的输入框内容填完之后，如果没有点提交审核就退出该页面就给他个弹窗提示是否退出
思路:用组件内的路由守卫，在离开组件时判断是否点击过提交审核，这边用一个状态判断，0或1，代码如下:

beforeRouteLeave(to, from, next) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    if (this.type === "input" && this.isCheck && this.isSkip === 0) {
      //这里面是**录入**的时候**点了解析预览**，但是**没有点提交审核**时，出现弹窗
        this.$confirm("你已经预结算预览还未提交审核，确定要离开吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            next();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
              duration: 2000,
            });
            next(false);
          });
    } else {
      next();
    }
  },

上面的代码可以解决大部分需求，比如点击其他页面时，确实会出现弹窗，但是项目里面加了一个返回上一页按钮，是用this.$router.back()实现的,当点击返回上一页按钮时，页面会闪烁一下，出现了弹窗又消失了，浏览器上面的网址变成了上一页的地址，但是页面还是这个页面，后面又换了this.$router.go(-1)和history.back(),都会出现这个问题。

最后解决：在弹窗外面加个setTimeout完美解决页面闪烁和跳转页面错误。
代码如下：

beforeRouteLeave(to, from, next) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    if (this.type === "input" && this.isCheck && this.isSkip === 0) {
      //这里面是录入的时候点了解析预览，但是没有点提交审核时，弹窗
      setTimeout(() => {
        this.$confirm("你已经预结算预览还未提交审核，确定要离开吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            next();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
              duration: 2000,
            });
            next(false);
          });
      }, 1);
    } else {
      next();
    }
  },