저장하지 않은 변경 사항이 있기 때문에 vue.js 구성 요소가 삭제되지 않습니다.

vuejs을 사용하고 있습니다. 사용자가 데이터를 저장할 수있는 구성 요소가 있습니다. 그러나 사용자가 데이터를 저장하지 않았으며 다른 경로로 이동하거나 구성 요소를 파괴하려고 시도 할 수 있습니다. 저장되지 않은 데이터가 있고 사용자가 실제로 저장되지 않은 상태로두고 싶다는 메시지를 표시하려고합니다.저장하지 않은 변경 사항이 있기 때문에 vue.js 구성 요소가 삭제되지 않습니다.

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

출처

2017-12-22 Rohanil

https://stackoverflow.com/questions/40425682/disable-changes-you-made-may-not-be-saved-pop-up-window –

@DakshMiglani 그것만이 '멈추는 사용자'에 관한 것이 아닙니다. 다음 구성 요소로 사용자가 이동할 때 멈추는 경우 제대로 질문을 읽고 대답을 제안하십시오. –

흠, 당신은 확실히

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

키가 이러한 방식으로 beforeRouteLeave을 사용하는 다음 (false)를 당신이 그렇게 그것을 next()에 인수로 false을 통과해야

다음 경로로 전달하지 않습니다.

올바르게 사용되는지 확인해야합니다.

출처

2017-12-22 13:53:21

예, 똑같은 코드를 사용합니다. 내 경로 구성 요소는 내가이 작업을 수행하는 구성 요소가 아닙니다. 나는 경로 구성 요소의 하위 구성 요소에서이 작업을 수행하고 있습니다. 어떤 차이가 있습니까? – Rohanil

멀리 탐색하려고 할 때 beforeRouteLeave 내부에서'console.log (to, from);를 할 수 있고 그 값을 공유 할 수 있습니다. –

경로의 구성 요소에'beforeRouteLeave'를 추가했는데 거기에 호출 중입니다. 이전에는 자식 구성 요소에있을 때 호출되지 않았습니다. 그러나 이제 또 다른 문제가 있습니다. 하위 구성 요소의 'beforeDestroy'는 경로 구성 요소의 beforeRouteLeave보다 늦게 실행됩니다. 따라서 내 경로 구성 요소는 하위 구성 요소에 저장되지 않은 데이터가 있는지 여부를 알지 못합니다. – Rohanil

저장하지 않은 변경 사항이 있기 때문에 vue.js 구성 요소가 삭제되지 않습니다.

답변

관련 문제