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?

score 148 · Accepted Answer · edited Apr 02 '18 at 12:08

148

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.

edited Apr 02 '18 at 12:08

Simon Forsberg

13,086
10
64
108

answered Jul 17 '17 at 19:07

Bert

80,741
17
199
164

7

@AshleyB This ends up working by name, but not by path. I don't have an explanation for why not by path, but they definitely do it by name in the docs. https://codepen.io/Kradek/pen/eRapoZ?editors=1010 – Bert Jul 17 '17 at 19:53
3

Confirmed that it still works by name but not by path: router.push({name: 'routeName', params: {whatever: 'andEver'}}) – Benjamin Oman Jan 20 '18 at 22:48
1

So does that mean you can't do this? {path: "/foo/:id", name: "foo", component: FooComponent, props: true} -the push - routers.push({name:"foo", params:{id:7, user: userObject}}) – Craig Aug 23 '20 at 16:53
Just to clarify @Bert's answer, [from the docs](https://router.vuejs.org/guide/essentials/navigation.html): _Note: params are ignored if a path is provided, which is not the case for query, as shown in the example above. Instead, you need to provide the name of the route or manually specify the whole path with any parameter_ – kozlone Feb 09 '21 at 16:16
Important to mention that the param value must be at routes in "query" as well and can be accessible with this.$route.params.Yourparam – abzalassembekov Sep 24 '21 at 17:48
1

Note that this was changed https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 – optim1st Oct 19 '22 at 06:57

Steven Spungin · Answer 2 · 2019-10-17T16:15:59.137

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

score 3 · Answer 3 · edited May 29 '20 at 08:24

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

edo9667 · Answer 4 · 2023-08-02T22:14:06.270

0

Had almost same issue, I think these answers may be too old. Reading from https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 seems there is no way to do something like:

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

or not anymore. I ended up using Vuex which is fast and easy to use https://vuex.vuejs.org/guide/

edited Aug 02 '23 at 22:14

answered Aug 02 '23 at 21:44

edo9667

1
1

`vuex` and `pinia` are developed (roughly) by the same team (their authors are both part of Vue's core team). They are recommending, on the [very first page](https://vuex.vuejs.org/) of vuex documentation the use of `pinia` going forward. `vuex` is now in sleep mode (will not be receiving additional functionality) and pinia [has several advantages](https://stackoverflow.com/a/71596533/1891677). – tao Aug 03 '23 at 00:20

Passing props with programmatic navigation Vue.js

4 Answers4

Linked

Related