Why doesn't Vue3 router not pass props with params?

Question

I want to pass a value to a view as prop in Vue3. This approach work well in Vue2 project but doesn't in Vue3

Router:

{      
  path: "/view2",
  name: "view2",
  component: View2,
  props: true
}

View 1 (from)

navigateTo(){
    this.$router.push({
      name: view2,
      params: {id: 'abc123'}
    })
}

View 2 (to)

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

Each time the navigateTo() is called, the 'id' is undefined in View2

What am I missing cause this works well in vue2 project.

Best

Try to change: `params: {id: 'abc123'}` to: `props: {id: 'abc123'}` in router push. — mare96, Oct 02 '19 at 12:30
Please, check your `params` using `console.log(to)` on route changing. — Augusto, Oct 02 '19 at 13:13
All nicely there when logging from router level => params: { id: 'abc123' } — KasparTr, Oct 02 '19 at 13:34
Its a large project, everything else works well and the same project is live, in production. Perhaps there is some configuration error although I am not aware of any that would only effect routing params. — KasparTr, Oct 03 '19 at 05:28
Did you manage to get this working without having to add the params inside the url? I'm still struggling to get this working in Vue3 — darkpool, May 10 '23 at 09:55

score 3 · Answer 1 · answered Oct 03 '19 at 01:53

3

You did not declare id in your path.

{      
  path: "/view2/:id", // <----
  name: "view2",
  component: View2,
  props: true
}

answered Oct 03 '19 at 01:53

Phil

1

Thanks. I don't need to pass path or query parameters. Need to pass values to props of the other view. – KasparTr Oct 03 '19 at 05:26
Take a look at this answer : https://stackoverflow.com/a/50507329/8575814. Is it what you are looking for? – Phil Oct 03 '19 at 12:26
1

Is there a way to do it **without** having the params inside the URL? For instance there's 100 params I want as props using router - I don't any of them to be explicitly visible to the user in the URL – parsecer Jan 15 '23 at 14:47
@parsecer Yes, see https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode. What is shown above is the "Boolean mode", but you can use the "Object mode" or "Function mode". – Phil Jan 16 '23 at 11:54
1

Did you manage to get this working without having to add the params inside the url? I'm still struggling to get this working in Vue3 – darkpool May 10 '23 at 09:12

1 Answers1