Vue3中如何向RouterView渲染的组件传递Props？

Great question! This is a common gotcha with newer Vue Router updates in Vue 3. Let me break down the solution for you:

The Correct Approach: Use <router-view> Slot with Explicit Prop Binding #

The issue you're facing happens because directly passing attributes to <router-view> relies on Vue's automatic attribute inheritance, which fails when the target component has a fragment or text root. Instead, you need to use the <router-view> slot to manually render the component and explicitly pass your props.

Here's how to adjust your code:

<template>
  <router-view v-slot="{ Component, route }">
    <!-- Render the matched component explicitly -->
    <component 
      :is="Component" 
      :product="product"
      <!-- Optional: Pass along any props defined in your route configuration -->
      v-bind="route.props"
    />
  </router-view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { Ref } from 'vue';

// Your existing type definition
interface IProduct {
  // Add your product properties here
  id: number;
  name: string;
}

const product: Ref<IProduct|undefined> = ref();
// ... Your existing logic to populate product
</script>

Why This Works #

• The v-slot="{ Component, route }" extracts the currently matched component and route information from <router-view>
• By using <component :is="Component">, you take direct control over rendering the component, which lets you bind props explicitly (like :product="product")
• The optional v-bind="route.props" ensures you don't miss any props defined in your route configuration (e.g., props derived from route parameters)

Why Your Initial Attempt Didn't Work #

Your first slot-based attempt was close, but you forgot to actually bind the product prop to the <component> tag. Without that binding, the prop never gets passed to the rendered component.

Understanding the Warning #

The warning you saw:

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

This happens because when you pass attributes directly to <router-view>, Vue treats them as non-prop attributes (like HTML attributes) and tries to attach them to the root element of the rendered component. If the component has a fragment (multiple root elements) or text as its root, there's no single element to inherit these attributes, hence the warning. By explicitly binding props via the slot, you avoid this automatic inheritance behavior entirely.

内容的提问来源于stack exchange，提问作者holycreeper