Tengo un código como:
<template> <router-view /> </template> <script setup lang="ts"> ... const product: Ref<IProduct|undefined>: ref(); ... </script> Necesito pasar product como accesorio al componente que se carga en router-view .
Hace algún tiempo era posible como <router-view :an-prop="product" /> , pero desde que se lanzó la nueva versión de Vue tengo una advertencia:
Los atributos extraños que no son accesorios (producto) se pasaron al componente, pero no se pudieron heredar automáticamente porque el componente representa fragmentos o nodos raíz de texto.
Tal vez estoy ciego, pero honestamente no encontré nada al respecto en la documentación oficial, solo ejemplos triviales del uso de <router-view> y miles de millones de ejemplos triviales del uso de vue-router mediante programación. Después de horas de experimentos y estudios de los resultados de los motores de búsqueda, descubrí que ahora router-view usa slots y termina con dicho código:
<router-view v-slot="{ Component }"> <component :is="Component" /> </router-view>Lo que no me dio mucho, en realidad. De todos modos, no entiendo qué hacer a continuación. ¿Hay alguna forma de pasar accesorios a la representación de un componente a través de RouterView hoy en día en vue3?
Acabo de probar con un nuevo proyecto vue 3. Funciona bien pasándolo directamente a RouterView. Luego, cualquier componente representado por RouterView tendrá acceso a ese accesorio.
Ejemplo:
enrutador/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;aplicación.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>Acerca deView.vue
<template> <div class="about"> <h1>This is about page</h1> <p>{{ product.name }}</p> </div> </template> <script setup> defineProps({ product: { type: Object }, }); </script>