VUE页面切换 执行的操作！

最近遇到项目 编辑页面 任何路由操作需要先保存 ；
这东西在生命周期里就没有 只能用beforeRouteLeave来干他
上代码

 beforeRouteLeave(to, from, next) {
     //离开当前页  
     //在data里保存一下 backFlag
       if(this.backFlag==0||to.path=='/login'){
           return  next()
       }
      this.$confirm('当前页面信息未保存，是否保存？', {
           confirmButtonText: '保存',
           cancelButtonText: '不保存',
           closeOnClickModal:false,
           closeOnPressEscape:false,
           distinguishCancelAndClose: true, //这个是用来处理confirm关闭事件!
            }).then(() => { 
                  return  // 走接口
            }).catch(action => {
              if(action=='close'){              
                      return false
              }else{
                   return  next()
                 }
                return false          
                 });
    },

 data() {
      return {
      backFlag:1 //部分操作可以不进入上面的函数 因为保存后就必要让用户再次保存
      }

重点是在mouted里面

  mounted() {
       if (window.history && window.history.pushState) {
        // 这个作用是为了用户 多次返回 倒是浏览器不能解析url
          localStorage.setItem('documenturl', document.URL)
          history.pushState(null, null, document.URL);
          window.addEventListener('popstate', this.cancel, false);
      }
    },
     destroyed(){
        window.removeEventListener('popstate', this.cancel, false);
       }

在方法里写一下!

mothods:{
  cancel(){
         if (window.history && window.history.pushState) {
           let record= localStorage.getItem('documenturl')
           //设置 一下 这样多次返回都不会闪烁
             history.pushState(null, null, record);
         }
     
      }}