Sometimes, we want to pass props with programmatic navigation Vue.js.

In this article, we’ll look at how to pass props with programmatic navigation Vue.js.

How to pass props with programmatic navigation Vue.js?

To pass props with programmatic navigation Vue.js, we call $router.push with an object with the params property with the props we want to pass into a component.

Then when we define the route, we set the props property to true to let us take the route parameters in as props into the route component.

For instance, we write

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

to call $router.push to navigate to the route with the given name.

The params object will be passed in as props.

Then we write

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

in the routes array that we use to create the VueRouter instance to add the route with name 'foo' and we set props to true to make the params available as props on FooComponent.

Conclusion

To pass props with programmatic navigation Vue.js, we call $router.push with an object with the params property with the props we want to pass into a component.

Then when we define the route, we set the props property to true to let us take the route parameters in as props into the route component.