Passing props and slots to named views (multiple components)

[WebMechanic]

Hey,
I'm still testing stuff so I'm playing with the syntax here which might me totally off :-) I couldn't find anything in the docs that resembled my usecase and the terms involved are too generic to find examples on the interwebs...

My question basically refers to the same section in the docs, but I need this for a route that has named views with different components each haveing different props I need to pass over.

For a single component per route this appears to be done like this with props: true:
const routes = [ { path: '/user/:id', component: User, props: true } ]
There might be a different syntax/solution than setting props: true somewhere which I need guidance for.

I use names views how do I set this props: true "parameter" for each of the components individually (see below) in order to pass them their props at runtime? These props are NOT based on anything that comes from the URL but just normal component props created in the parent component that includes the <RouterView>.

I eventually have various routes that potentially utilize multiple named views.
Whether any route could have multiple named views or not is determined by env settings or other means before the routes array is passed to the Router instance.

This is the excerpt from my tests routes array (simplified component paths):

const routes = [
  { ... route 0 ... },
  { ... route 1 ... },
  {
    name: 'favs',
    path: '/favourites',
    component: () => import('PageFavourites.vue'),
  },
  { ... route 3 ... },
];
/**
 *  some code in between that evaluates env vars or whatnot and
 *  makes "descisions" that eventually may end up doing this to route #2
 */
delete routes[2].component; // drop single entry
// create named views
routes[2].components = {
  default: () => import('PageFavourites.vue'),
  secondary: () => import('Sniffer.vue'),
};
// doesn't seem to help
routes[2].props = { 
  default: true, 
  SnifferVue: true 
};

Within my App / Layout component I have this template snippet using a <component> for the named secondary view:

<!-- always render the default -->
<RouterView />

<!-- simple check if there are multiple components for this route -->
<RouterView v-if="$route.matched[0].components" v-slot="{ Component }"
    name="secondary">
    <component :is="Component" v-bind:foo="someVariable"></component>
</RouterView>

The Sniffer component has a prop called foo and renders, but the value of someVariable doesn't show up as the prop.
Passing :foo="someVariable" in any shape or form does not work.

I also tried

<RouterView v-if="$route.matched[0].components" name="SnifferVue"
  v-slot="{ Component }"
  v-bind:foo="someVariable">
 ...

Are ther other attributes/props/parameter for <RouterView> that I should use?

Any hints welcome!

[skirtles-code]

Using the props: true setting it only required if you want to pass props from the router itself, e.g. based on the URL. If you need to pass props from the parent component then you don't need that setting.

You should just need to use :foo="someVariable" on the <component> tag, much like you have in one of the code snippets you shared. I don't see anything wrong with that code that would prevent it from working.

I've put together a Playground based on your code to demonstrate it working correctly:

• Playground

[WebMechanic]

Thank you the playground sample! That's very nice of you. It does work indeed...
I made a simple adjustment to your sample to match exactly what I have and it still works :-)
I have no idea why it doesn't in my setup, that's why I came here for clarification. Need to triple check again what's going on.