CODEWITHSUNDEEP
javascriptvuejs2
Halcyon
Halcyon

Reputation: 1429

In Vue.JS 2, how do I pass props to a router view in a push call?

I have a component that should take the user to edit:

export default {
        name: "MeComponent.vue",
        props: ['user'],
        data() {
           ...
        }
}

I am trying to show this using a push call:

<a href="#" v-on:click.prevent="$router.push({name: 'Me', params: { user: user, test: 1 }})" class="pure-menu-link">Me</a>

But instead of using the params and accessing from this.$router.params, I would like to simply pass it as the prop user so that if I use the component outside the router-view, I can simply pass a prop instead.

Does using it like this even make sense, or should I not worry about decoupling it?

Upvotes: 0

Views: 1019

Answers (1)

Jacob Goh
Jacob Goh

Reputation: 20845

you can set props: true in the path definition.

When props is set to true, the route.params will be set as the component props.

from https://router.vuejs.org/en/essentials/passing-props.html

const router = new VueRouter({
  routes: [
    { 
      path: '/user/:id', 
      component: User, 
      props: true 
    },
  ]
})

Upvotes: 2

Related Questions