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

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)
  }
}
複製代碼