Passing props to Vue.js components instantiated by Vue-router

66

votes

Suppose I have a Vue.js component like this:

var Bar = Vue.extend({
    props: ['my-props'],
    template: '<p>This is bar!</p>'
});

And I want to use it when some route in vue-router is matched like this:

router.map({
    '/bar': {
        component: Bar
    }
});

Normally in order to pass 'myProps' to the component I would do something like this:

Vue.component('my-bar', Bar);

and in the html:

<my-bar my-props="hello!"></my-bar>

In this case, the router is drawing automatically the component in the router-view element when the route is matched.

My question is, in this case, how can I pass the the props to the component?

vue.jsvue-router

85

votes

<router-view :some-value-to-pass="localValue"></router-view>

and in your components just add prop:

props: {
      someValueToPass: String
    },

vue-router will match prop in component

32

votes

sadly non of the prev solutions actually answers the question so here is a one from quora

basically the part that docs doesn't explain well is

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

so what you actually need when sending the prop through the route is to assign it to the params key ex

this.$router.push({
    name: 'Home',
    params: {
        theme: 'dark'
    }
})

so the full example would be

// component
const User = {
  props: ['test'],
  template: '<div>User {{ test }}</div>'
}

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

// usage
this.$router.push({
    name: 'user',
    params: {
        test: 'hello there' // or anything you want
    }
})

10

votes

In the router,

const router = new VueRouter({
  routes: [
    { path: 'YOUR__PATH', component: Bar, props: { authorName: 'Robert' } }
  ]
})

And inside the <Bar /> component,

var Bar = Vue.extend({
    props: ['authorName'],
    template: '<p>Hey, {{ authorName }}</p>'
});

4

votes

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

        // for routes with named views, you have to define the props option for each named view:
        {
          path: '/user/:id', 
          components: { default: User, sidebar: Sidebar },
          props: { default: true, sidebar: false }
        }
      ]
    })

Object mode

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

That is the official answer. link

1

votes

This question is old, so I'm not sure if Function mode existed at the time the question was asked, but it can be used to pass only the correct props. It is only called on route changes, but all the Vue reactivity rules apply with whatever you pass if it is reactive data already.

// Router config:
components:
{
    default: Component0,
    named1: Component1
},
props:
{
    default: (route) => {
        // <router-view :prop1="$store.importantCollection"/>
        return { prop1: store.importantCollection }
    },
    named1: function(route) {
        // <router-view :anotherProp="$store.otherData"/>
        return { anotherProp: store.otherData }
    },
}

Note that this only works if your prop function is scoped so it can see the data you want to pass. The route argument provides no references to the Vue instance, Vuex, or VueRouter. Also, the named1 example demonstrates that this is not bound to any instance either. This appears to be by design, so the state is only defined by the URL. Because of these issues, it could be better to use named views that receive the correct props in the markup and let the router toggle them.

// Router config:
components:
{
    default: Component0,
    named1: Component1
}

<!-- Markup -->
<router-view name="default" :prop1="$store.importantCollection"/>
<router-view name="named1" :anotherProp="$store.otherData"/>

With this approach, your markup declares the intent of which views are possible and sets them up, but the router decides which ones to activate.

0

votes

Use:

this.$route.MY_PROP

to get a route prop

Passing props to Vue.js components instantiated by Vue-router

6 Answers