Vue3 pass props to an component rendering via RouterView

user_9270508 0
Viewed 351

I have code like:

<template>
 <router-view />
</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?

vue-router vuejs3 vue.js javascript
1 Answers

Just tested with a new vue 3 project. It works just fine passing it directly to the RouterView. Then any component rendered by the RouterView will have access to that prop.

Example:

router/index.js

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "default",
      component: () => import("../views/HomeView.vue"),
    },
    {
      path: "/home",
      name: "home",
      component: () => import("../views/HomeView.vue"),
    },
    {
      path: "/about",
      name: "about",
      component: () => import("../views/AboutView.vue"),
    },
  ],
});

export default router;

App.vue

<template>
  <header>
    <nav>
      <RouterLink to="/home">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>
  <RouterView :product="product" />
</template>
<script setup>
import { RouterLink, RouterView } from "vue-router";
import { ref } from "vue";
const product = ref({ name: "bmw e46" });
</script>

HomeView.vue

<template>
  <div class="about">
    <h1>This is home page</h1>
    <p>{{ product.name }}</p>
  </div>
</template>
<script setup>
defineProps({
  product: { type: Object },
});
</script>

AboutView.vue

<template>
  <div class="about">
    <h1>This is about page</h1>
    <p>{{ product.name }}</p>
  </div>
</template>
<script setup>
defineProps({
  product: { type: Object },
});
</script>
user_133127920
Related