Passing props with programmatic navigation Vue.js

Question

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

Answer 1

Running into the same problem with children routes defined in router. router.js below shows children routes mapped to named

<router-view name="create"></router-view>
<router-view name="dashboard"></router-view>

router.js

    {
      path: "/job",
      name: "Job",
      component: () => import("./views/JobPage"),
      children: [
        {
          path: "create",
          name: "JobCreate",
          components: {
            create: JobCreate
          }
        },
        {
          path: ":id",
          name: "JobConsole",
          components: {
            dashboard: JobConsole
          }
        }
      ]
    },

When I attempt to pass props from create, vue-router fails to capture the dynamic route matching needed for JobConsole:

      this.$router.push(
        {
          name: "Job",
          params: {
            id: this.ID_From_JobCreate
          }
      )

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' }})

Answer 3

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.