Prevent navigation when click to one item of the navigation bar

Question

I create a custom lightning component and have some unsaved data. I'd like to show a warning and optionally prevent the navigation when clicking to a navigation bar (such as Home, Account,.. ).

I already tried with aura:locationChange and beforeunload, but it didn't work. Does anyone have any solution for this case?

     <aura:handler event="aura:locationChange" action="{!c.handleLocationChange}"/>
     handleLocationChange : function (cmp, event, helper) {
        confirm('You have unsaved data. Do you want to leave?');
        event.preventDefault();
     }


    window.addEventListener('beforeunload', function (e) {
       confirm('You have unsaved data. Do you want to leave?');
       e.preventDefault();
    }

Answer 1

If you are in Lightning Experience (the component works only in this experience), you can use lightning:unsavedChanges here. You will need to just add the implementation on your custom component. Refer to the documentation for implementation details.

This component provides a way to notify the UI containment hierarchy of unsaved changes and to participate in saving or discarding those changes based on the user's decision.

To access the methods, create an instance of the lightning:unsavedChanges component inside of your component and assign an aura:id attribute to it.