vue2.0元件內的守衛（beforeRouteLeave實現 編輯未儲存，彈窗提示）

行走的羊駝駝發表於2018-12-15
Vue元件

html

 <el-form-item label="姓名：" prop="name">
   <el-input v-model="Form.name" placeholder="請輸入姓名" @change="changeNoSave"></el-input>
 </el-form-item>
 <el-form-item>
   <el-button  @click="submitForm('Form')"> 保 存 </el-button
 </el-form-item>
複製程式碼

js

  beforeRouteLeave(to, from, next) {
    if (this.change_nosave) {
      this.$confirm("您填寫的內容未儲存，確定離開嗎?", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
        distinguishCancelAndClose: false
      }).then(() => {
        next();
      });
    } else {
      next();
    }
  },
  data(){
    return{
        change_nosave :false
    }
  },
  methods: {
    changeNoSave(status) {
      this.change_nosave = status;
    }，
  submitForm(formName) {
      this.change_nosave = false;
  }
  }
複製程式碼

元件內的守衛 1.beforeRouteEnter

  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫
    // 不！能！獲取元件例項 `this`
    // 因為當守衛執行前，元件例項還沒被建立
  },
複製程式碼

注：beforeRouteEnter 守衛 不能 訪問 this，因為守衛在導航確認前被呼叫,因此即將登場的新元件還沒被建立。不過，你可以通過傳一個回撥給 next來訪問元件例項。在導航被確認的時候執行回撥，並且把元件例項作為回撥方法的引數。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問元件例項
  })
}

複製程式碼

2.beforeRouteUpdate (2.2 新增)

  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫
    // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。
  }
例：
beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}
複製程式碼
// 可以訪問元件例項 `this`
複製程式碼

}, 3.beforeRouteLeave

  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫
    // 可以訪問元件例項 `this`
  }
}

這個離開守衛通常用來禁止使用者在還未儲存修改前突然離開。該導航可以通過 next(false) 來取消。
例：
beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}
複製程式碼

相關文章