Global EventBus not working

i had asked a similar question before also but this time i am trying to use a global eventbus.
I have the following code. When I navigate from ResetPassword to Login, i should see the successmessage with a Your password has been changed successfully. Please login to continue but it always shows a blank.
What could I be doing wrong?

plugins.js:
Vue.prototype.$eventHub = new Vue();

ChangePassword.vue:

methods: 
  {  
    ChangePassword() 
    {
      this.$eventHub.$emit('navigation-message', 'Your password has been changed successfully. Please login to continue.');
      this.$router.push({ name: 'login'});                  
    },
  },

Login.vue:

data() {
    return {
      successMessage:'',
    };
  },
  created () 
  {
this.$eventHub.$once('navigation-message', (payload)=>
{
  updateSuccessMessage(payload);    
});
  },
    beforeDestroy() 
      {
        this.$eventHub.$off('navigation-message');
      },
methods: 
  { 
updateSuccessMessage(payload) 
{
  this.successMessage=payload;
},
},

you emit the message before the Login component exists (which is after the router navigation), so it can’t receive this event.

You should not use an event for such stuff. Either use a query param in the route, or - if you need the route to be clean - set a flag in some shared store, e.g. vuex or something simpler, and unset it in Login on destroy.

1 Like

Thank you @LinusBorg for your input.