Vue 页面跳转提示和回退问题

有些功能需求，要求页面在跳转时，如果有没有保存的修改或未完成的操作，提示用户是否保存。所以需要在离开当前页面之前做判断。

    //路由跳转时,需要拦截

    beforeRouteLeave (to, from, next) {
       // 判断数据是否修改，如果修改按这个执行，没修改，则直接执行离开此页面
       //this.isneedLeave 防止重复提示
        if(this.isChange() && this.isneedLeave == false){
          this.$confirm("有未保存的更改，确定要离开当前页面么？", "提示", {
              iconClass: "el-icon-question",
              cancelButtonClass: "button-cancel",
              confirmButtonText: '留在页面',
              cancelButtonText: '离开页面',
              showClose:false,
              closeOnClickModal:false,
              type: 'warning'
          }).then(() => {
            next(false)
          }).catch(() => {
            next()
          })
        } else {
          if(this.isneedLeave == false)
          {
             next(false)
          }else{
            next()
          }
        }
    },

以上方法可以拦截路由跳转时，提示用户需要保存信息，但是浏览器回退时并不会触发beforeRouteLeave，导致confirm框闪现一下，所以需要在监听浏览器的事件。

//页面初始化时监听
 mounted() {
   if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL)
        window.addEventListener('popstate', this.goBack, false)
     }
 }，
//页面销毁时移除监听
destroyed () {
     window.removeEventListener('popstate', this.goBack, false)
 }，
methods:{
  goBack()
      {
        history.pushState(null, null, null)
        if(this.isChange()){
            this.$confirm("有未保存的更改，确定要离开当前页面么？", "提示", {
              iconClass: "el-icon-question",
              cancelButtonClass: "button-cancel",
              confirmButtonText: '留在页面',
              cancelButtonText: '离开页面',
              showClose:false,
              closeOnClickModal:false,
              type: 'warning'
            }).then(() => {
              }).catch(() => {
              this.isneedLeave = true
             //不能用go(-1),或者back之类的,不然页面就是死循环
              this.$router.push({path:'/my/home'})
            })
          } else {
              this.isneedLeave = true
              if(this.$store.state.userInfo){
                this.$router.push({path:'/my/home'})
              }else{
                this.$router.push({path:'/login'})
              }
          }        
      } 
}