[Vuejs]-How to pass a User Id using params as props In Vue?

by

3👍

✅

You need to use userId as a param in your rooute to be able to pass user id from URL as props to your component:

{
        path: "/contact/:userId",
        name: "Contact",
        component: Contact,
        props: true
    }

See Passing props to reactive components

👤Anatoly

2👍

Well, you get user data once when you try to log in on the login page and didn’t save it in the right place. simply you just can save your user data in local storage when getting the response from API.

Login.Vue

.then(res => {
 if (res.status === 200) {
  console.log(res.data['id'])
  this.$router.push({ name:'Contact' })
  
  localStorage.setItem('user_id', res.data['id']);
 }
})

and after that, if you check your Local Storage in Application tab in your browser developer tools, you can see user_id in Local Storage.
now you can get user_id from local storage in any component you want:

Contacts.vue

export default {
 name: 'Contact',

 data() {
  return {
   UserId: localStorage.getItem('user_id');
  };
 },
}
👤Ari Shojaei

Leave a comment