저장되지 않은 변경 사항이 있으므로 vue.js 구성 요소 삭제를 중지합니다.

저장되지 않은 변경 사항이 있으므로 vue.js 구성 요소 삭제를 중지합니다.

Vue.js를 사용하고 있습니다.사용자가 데이터를 저장할 수 있는 구성 요소가 있습니다.그러나 사용자가 데이터를 저장하지 않아 다른 경로로 이동하거나 구성 요소를 제거하려고 할 수 있습니다.저장되지 않은 데이터가 있다는 메시지를 표시하고 사용자가 데이터를 저장되지 않은 상태로 유지하기를 원합니다.

사용자가 저장되지 않은 데이터를 남기고 싶지 않다고 하면 탐색이나 구성 요소의 파괴를 중지해야 합니다.사용 중beforeDestroy저장되지 않은 데이터가 있는지 확인하고 작동하지만 구성 요소나 내비게이션을 파괴하는 것을 멈출 수 없습니다.사용해 보았습니다.beforeRouteLeave하지만 효과가 없습니다.이 일을 어떻게 할 것인지에 대한 아이디어가 있습니까?

음, 그렇군요, 정말로 사용하시나요?beforeRouteLeave이와 같이

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

키가 다음입니다(거짓).

당신은 통과해야 합니다.false의 논거로서next()그래서 그것은 다음 경로로 전달되지 않을 것입니다.

정확하게 사용되었는지 확인만 하면 됩니다.

언급URL : https://stackoverflow.com/questions/47942026/stop-destroying-vue-js-component-because-there-are-unsaved-changes