javascript - 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.