Passing props from Vue3 to a component being rendered through RouterView

Question

Passing props from Vue3 to a component being rendered through RouterView

I'm facing an issue with the following code snippet:

<template>
 <router-view />
</template>
<script setup lang="ts">

...

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

...

</script>

The challenge is to pass product as a prop to the component loaded in the router-view.

In the past, I could simply use

<router-view :an-prop="product" />

, but after the new version of Vue was released, I started getting a warning:

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

I searched through the official documentation but couldn't find any relevant information. After numerous experiments and search engine queries, I discovered that the latest version of router-view utilizes slots. This led me to modify the code as follows:

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

Although this change didn't provide much clarity. I am still unsure about what steps to take next. Is there a way to pass props to a component rendered via RouterView in Vue 3?

javascript vue.js vue-router vuejs3

Answer 1

Answer №1

Recently experimented with a brand new Vue 3 project and the results were impressive. The data can be easily passed directly to the RouterView, allowing any component rendered by it to access that property.

For instance:

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>

Answer 2

Recently experimented with a brand new Vue 3 project and the results were impressive. The data can be easily passed directly to the RouterView, allowing any component rendered by it to access that property.

For instance:

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>

Passing props from Vue3 to a component being rendered through RouterView

Answer №1

Similar questions

"Enhancing Forms with Multiple Event Listeners for Seamless Sub

Adjust the input and transition the UI slider

Generate a menu submenu allowing for interactive toggling and dynamic visualization of expandable/collapsible sections upon clicking, featuring visually

Creating a PDF document using html2pdf: A step-by-step guide

Personalized JavaScript Arrays

Methods for reloading the requirejs module

Dealing with Koa-router and handling POST requests

What is the best way to extract the text inside a div element based on the input value in a

JavaScript Array Problem

I have successfully established a new channel, but I am having difficulty retrieving the unique identifier for it

Is it possible to decrease the size of a div by scrolling both vertically and horizontally?

Using jQuery to move a div to a specific location on the page

In React, facing difficulty in clearing setTimeout timer

Minimize white spaces when validating input fields in a form using Javascript

JavaScript (specifically, using jQuery) in conjunction with AJAX

Efficiently encode and decode JSON data between PHP and JavaScript

Acquire a Vue component on a separate page by clicking a button on another Vue component or an HTML button click

What is the best way to preserve an apostrophe within a variable in JavaScript without it being replaced?

The Impact of Spaces in Inline Scripting within Asp.NET

Generating option list from API JSON responses