Parameters passed in route not really being passed

I’m trying to get parameters in the other page I’m redirecting to, but I can’t see the parameters when I get directed.

this.route.push({path: "/Profile", params:{id: 333}});

In the destination page:

{{route.params.id}} / {{$route.params.id}}

I also tried

{{id}}

and I also tried:

  data(){
    return{
      id: ""
    }
  }
  created(){
    this.id=this.$route.params.id
  }

If I console.log the params, I get either undefined or an empty {}

console.log(route.params); / console.log(this.$route.params);

How can I effectively pass params to the route and retrieve the id?

Thank you.

UPDATE

I found a possible solution:

this.route.replace("/Profile/"+id);

and in routes/index.ts


{
    path: '/Profile/:id',
    name:'Profile',
    props: true,
    component: () => import ('../views/Profile.vue')
  }

This solves my problem but I don’t know if there are other ways, better ways, of doing that. What about route.push({path: "/Profile", params:{id: 333}}); what’s that for?

After trying a lot and searching a lot I came up with this:

Solution1:

If you use the path property, then you should this:

this.route.replace("/Profile/"+id);

and in routes/index.ts

{
    path: '/Profile/:id',  
    component: () => import ('../views/Profile.vue')
  }

Solution2:

if you use named routes, then you can do this:

this.route.push({name: "Profile", params:{id: 333}});

and your in index.ts file, inside the folder routes:

{
    path: '/Profile',  
    name: 'Profile',
    component: () => import ('../views/Profile.vue')
  }

i believe this is documented in the vue-router documentation? not sure what you solved here.

1 Like

It’s documented in the vue-router documentation, however it’s not clear. I made it more understandable.

By the way, as you are an experienced developer, could you help me with this?

Thank you in advance.

Could you include your Profile page code? It would be helpful to see how you are accessing the params on page loading.