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?

Simon Forsberg · Accepted Answer · 2018-04-02 12:08:21Z

154

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 2, 2018 at 12:08

Simon Forsberg

13.4k11 gold badges66 silver badges109 bronze badges

answered Jul 17, 2017 at 19:07

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Bert Over a year ago

@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. codepen.io/Kradek/pen/eRapoZ?editors=1010

Benjamin Oman Over a year ago

Confirmed that it still works by name but not by path: router.push({name: 'routeName', params: {whatever: 'andEver'}})

Craig Over a year ago

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

kozlone Over a year ago

Just to clarify @Bert's answer, from the docs: 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

optim1st Over a year ago

Note that this was changed github.com/vuejs/router/blob/main/packages/router/…

|

Steven Spungin · Accepted Answer · 2019-10-17 16:15:59Z

18

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

edited Oct 17, 2019 at 16:15

answered Apr 29, 2018 at 2:36

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Comments

m02ph3u5 · Accepted Answer · 2020-05-29 08:24:06Z

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 · Accepted Answer · 2023-08-02 22:14:06Z

2

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 2, 2023 at 22:14

answered Aug 2, 2023 at 21:44

edo9667

213 bronze badges

1 Comment

tao Over a year ago

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

Collectives™ on Stack Overflow

Passing props with programmatic navigation Vue.js

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related