Passing props with programmatic navigation Vue.js

Question

I have a Vue component that has a prop named 'title' e.g:

<script> export default {   props: ['title'],   data() {     return {     }   } } </script> 

I navigate to the component programmatically after a certain action is complete. Is there a way to programmatically route a user while also setting the prop value? I know you can create a link like this:

<router-link to="/foo" title="example title">link</router-link> 

However, is there a way to do something like the following?

this.$router.push({ path: '/foo', title: 'test title' }) 

EDIT:

As suggested I've changed my route to the following:

   {       path: '/i/:imageID',       component: Image,       props: true     } 

And the navigation to the following:

this.$router.push({ path: '/i/15', params: {title: 'test title' }}) 

However, my Image component (template - see below) still doesn't show any title.

<h1>{{ title}}</h1> 

Is there anything that could be causing issues?

Answer 1

Use params.

this.$router.push({ name: 'foo', params: {title: 'test title' }}) 

Note: You have to specify name. This does not work if you call this.$router.push using path.

And set the route to accept params as props.

{path: "/foo", name:"foo", component: FooComponent,  props: true} 

props: true is documented here.

Answer 2

The vue-router docs clearly state params only work with name and not path.

// set  props: true in your route definition const userId = 123 router.push({ name: 'user', params: { userId }}) // -> /user/123 // This will NOT work router.push({ path: '/user', params: { userId }}) // -> /user 

If you use path, pass the params in the path itself or use query as demonstrated below:

router.push({ path: `/user/${userId}` }) // -> /user/123  // with query, resulting in /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})