I am working with a Vue component that includes a prop called 'title' like this:
<script>
export default {
props: ['title'],
data() {
return {
}
}
}
</script>
After completing a specific action, I need to programmatically navigate to the component. Is there a way to set the prop value while routing the user programmatically? I am aware of creating a link in this manner:
<router-link to="/foo" title="example title">link</router-link>
But is it possible to achieve something similar to the following?
this.$router.push({ path: '/foo', title: 'test title' })
UPDATE:
Following some suggestions, I have updated my route as shown below:
{
path: '/i/:imageID',
component: Image,
props: true
}
And the navigation now looks like this:
this.$router.push({ path: '/i/15', params: {title: 'test title' }})
However, even after these changes, my Image component (template - displayed below) still does not display the title.
<h1>{{ title}}</h1>
Is there any possible reason for this issue?