Prop is undefined when using vue router with query params

Question

I'm using vue-router v.3.3.4 and I want to pass some value from one component to another with query.

I followed VueJS documentation on https://router.vuejs.org/guide/essentials/passing-props.html#function-mode and here is an excerpt of my code

From my Register.vue component, I call the router to go to the Login.vue component by passing a success value

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

In my router definition, I define the corresponding route as follows:

  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    props: (route) => ({ success: route.query.success }),
  },

Finally, in my Login.vue component, I want to use this prop to display a message if the value is true, so I define the props object for my component as follows:

props: {
    success: {
      type: String,
      required: false,
    }
  },

The URL is correctly set up like /login?success=true but the success props is undefined. I also tried with a Boolean type instead of string but with no success.

I have found many similar issues but most of them were due to either an old version of vue-router, or a wrong definition of the route in router.

What am I doing wrong ?

where you get success props is undefined ? can you provide more information? — Mohammad Masoudi
@MohammadMasoudi Actually, it doesn't render if I try to bind the prop to some part of the template using {{success}} or within a sub-component. And if I try to inspect the value in the created method (where I want to use it to update a component's data element) by printing it in the console, I get undefined. — Beinje
@tony19 thank you for this example. Yet, I can't find what is the difference with my own code. If I look into the Vue DevTools console, I do have an $attrs with success: "true". Do you have any idea where things can go wrong or how I could further investigate the problem ? — Beinje

Mhammed Talhaouy Mhammed Talhaouy · Accepted Answer · 2021-04-15T14:30:53

try this it's will work

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

Prop is undefined when using vue router with query params

1 Answers