How to pass props to an component rendering via RouterView?

Version

4.0.14

Reproduction link

codepen.io

Steps to reproduce

Copy this little code and put it in any Vue3 component.

What is expected?

Prop is passing to children component.

What is actually happening?

Extraneous non-props attributes (product) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

---

I have code like:

<template>
 <router-view :an-prop="product" />
</template>
<script setup lang="ts">

...

const product: Ref<IProduct|undefined>: ref();

...

</script>

I need to pass product as a prop to the component which loads in router-view.

Some time ago it was possible just like <router-view :an-prop="product" />, but since new version of Vue was released I’ve got warning:

Extraneous non-props attributes (product) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

Maybe I’m blind, but I honestly didn’t find anything about it in the official documentation, only trivial examples of using <router-view> and billions of trivial examples of using vue-router programmatically. After hours of experiments and studies search engines’ results I found out that now router-view uses slots and end up with such code:

<router-view v-slot="{ Component }">
 <component :is="Component" />
</router-view>

Which gave me not much, actually. Anyway I don’t understand what to do next. Is there any way to pass props to an component rendering via RouterView nowadays in vue3?

[pei-han]

the document of vue-router is sucked. i can not find anything about component element at all.

[MohammadArefHaidary]

in