Vue-router: "props" option works differently than explained in the docs when defining multiple components on a route,

[brad426]

Given a route entry like this:

{
  path: '/path/:test_prop',
  components: {
    default: Bar,
    a: Foo
  },
  props: true
}

Neither component Foo or Bar will receive the test_prop prop

Working example of issue https://jsfiddle.net/6du90epg/231/

[LinusBorg]

I think this is "only" a problem of lacking documentation.

Looking at the source here and here, it's clear that the intended usage with multiple components is this:

 {
  path: '/multiple/:test_prop',
  components: {
    default: Bar,
    a: Foo
  },
  props: {
    default: true,
    a: (route) => ({ test_prop: route.params.test_prop })
  }
}

With that, it works as intended: https://jsfiddle.net/Linusborg/6du90epg/237/

And this makes sense, because in most scenarios, each component will/might need a different set of props.

[brad426]

Yup, that works perfectly. Thank you.

[LinusBorg]

Re-opened because we still have to track improvement of docs here. ;)

[LinusBorg]

merged imrpoved docs section, have to republish again tonight, though.

[veonua]

{
      path: '/a',
      components: {
        default: Reader,
        toolbar: ReaderToolbar
      },
      props: { 
        default : (route) => ({ url: route.query.u, card_ref: route.query.r }), 
        toolbar : (route) => ({ url: route.query.u, card_ref: route.query.r })
      } 
    }

ReaderToolbar got no props