How to dispay flash message after redirect vue-router

Viewed 2107

I'm creating simple login logout application using vuejs and express. After user register successfully, I redirect them to page login by this.$router.push('/login'), and I want to display a flash message like 'Register sucess. Now log in!'

Here is my method

In Register.vue

this.$router.push("/login", () => {
  console.log('Register success')
  EventBus.$emit('registerSuccess')
 });

In Login.vue

 <div class="alert alert-success" role="alert" v-if="flashMsg">{{flashMsg}}</div>
    data() {return {flashMsg: ''}}
    created() { 
        console.log('Created component')
        EventBus.$on("registerSuccess", () => {
          console.log('Set flash msg')
          this.flashMsg = "Now log in!"
        });
      },

It don't work. EventBus listen the emit but don't set any value to flashMsg.

Console

Register success
Set flash msg
Created component

Can someone tell me how to do this? Thank you

1 Answers

According to this, what you are looking for is not possible because you are changing routes before emitting an event and therefore it cannot be caught.

I suggest you try using localStorage/SessionStorage, Vuex or query strings.

Related