Navigation Guard Stopping Me Going to Page

Question

I have a vue page I am using a navigation-guard on. This is being used as its an Update Details page, so I am using beforeRouteLeave, which if the details have changed, displays my warning modal, but this is where I'm stuck. If I click my 'Disregard Changes' button, I want the modal to close and the navigation to happen, but I can't get it to work, as I keep getting an error:

Navigation aborted from "/myAccount/accountDetails" to "/contactus" via a navigation guard.

I have tried using $emit on click, but I can't get my $on to trigger in my component when my modal closes.

Component

beforeRouteLeave (to, from , next) {
    if (!this.detailsChanged) {
        next();
    } else {
        next(false);

        let data = {
            fromPage: 'PersonalDetailsPage',
            toPage: '/contactus',
            personalDetails: {
                name: this.pdName,
                comp_name: this.pdCompName,
                ddi: this.pdTelNo,
                ext: this.pdExtNo,
                mob: this.pdMobNo,
                email: this.pdEmailAdd
            }
        };
        
        VueEvent.$emit('show-details-not-saved-modal', data);
    }
}

Whole modal code

<template>
    <div class="modal fade danger-modal" id="detailsNotSavedModal" tabindex="-1" role="dialog" aria-labelledby="detailsNotSavedModal" aria-hidden="true"
            data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content danger-modal-content">
                <div class="modal-header danger-modal-headerfooter justify-content-start">
                    Updated details not saved
                </div>
                <div class="modal-body">
                    <p>The details have changed but have not been saved.</p>
                    <p>Are you sure you want to disregard the updated details?</p>
                    <p>Clicking 'Save details' will save the updated details.</p>
                    <p>Clicking 'Disregard changes' will disregard any updated details.</p>
                </div>
                <div class="modal-footer danger-modal-headerfooter">
                    <button ref="saveButton" class="btn btn-success" type="submit" data-dismiss="modal" @click="updateDetails">Save details</button>
                    <router-link :to="navigateTo" tag="button" class="btn btn-danger" data-dismiss="modal" @click="disregardDetails">Disregard changes</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "DetailsNotSavedModal",

    data() {
        return { 
             passedDetails: [],
             navigateTo: ''
        }
     },

    created() {
        VueEvent.$on('show-details-not-saved-modal', ( passedDetails ) => {
            this.passedDetails = passedDetails;

            console.log('passedDetails', passedDetails)

            this.navigateTo = this.passedDetails.toPage;

            $('#detailsNotSavedModal').modal('show').on('shown.bs.modal', this.focus);
        });
    },

    methods: {
        focus() {
            this.$refs.saveButton.focus();
        },

        updateDetails() {
            alert('Save clicked')
        },

        disregardDetails() {
            this.$emit('disregard_changes', { detailsChanged: false })

            // Also tried using a button and the below
            // this.$router.push(this.navigateTo);
        }
    }
}
</script>

As you can see I am emitting 'disregard_clicked' and I have tried the below everywhere in my hooks` but it never gets called.

VueEvent.$on('disregard_changes', ( data ) => {
    this.detailsChanged = data;
    console.log('0')
});

Basically, I need to stop navigation if details changed, display my modal if click 'Save'. This will close modal and save details. If they click 'Disregard', the modal closes, and the user should navigate to menu option selected.

Answer 1

VueEvent.$on('disregard_changes', ...), but your component has this.$emit('disregard_changes', ...), which does not emit the event on the event bus in VueEvent.

Solution: Change this.$emit to VueEvent.$emit