Passing data between paths using $router.push() in VueJS

Question

I am kinda new to VueJS and I am trying to pass the role of a user from the login path after he/she has been authenticated to the home page where I can then determine what links the user can see using v-if. Below is my login.vue code:

this.$axios({
                      method: 'post',
                      url: 'api/role',
                      data: {
                        'email': this.username
                      },
                      headers: {'Authorization': 'Bearer '+ this.$tokens.getToken()}
                    })
                    .then(response => {
                        this.role = response.data['role'];
                        
                    })
    				this.$router.push('/');
    			})
    			.catch(function(error){
    				console.log(error);
    			})

How can I pass the 'this.role' value to path '/' so I can access it from there?

Possible duplicate of How to pass data from one view to another with the vue-router — ittus
Possible have your answer stackoverflow.com/questions/45484684/… — ittus

Vamsi Krishna Vamsi Krishna · Accepted Answer · 2018-06-02T10:29:22

You can use a query to pass the role.

So add a query where you programmatically navigate the user to homepage:

this.$router.push({path:'/', query:{role: this.role}});

Then in your home page component you can retrieve the route queries for your functionality

For example:

//homme page component

created(){
  if(this.$route.query.role === 'admmin){
    //this is admin
  }
}

Passing data between paths using $router.push() in VueJS

1 Answers