He estado atascado en este tema por un tiempo sin información en línea. usando vue3
Defino un componente de diseño dentro de mi enrutador meta: etiqueta.
Dentro de mi App.vue compruebo si una ruta específica tiene la metaetiqueta de diseño y, de ser así, el `component: is="layout" es verdadero.
aplicación.vue
<template> <component :is="layout"> <router-view /> </component> </template> <script> computed: { layout() { let layout = null; for (const match of this.$route.matched) if (match.meta && match.meta.layout) layout = match.meta.layout; if (layout) return layout; return "div"; }, } </script>enrutador.vue
const usLayout = () => import("../layouts/usLayout.vue"); { path: "/", name: "us", component: GenericRouterView, meta: { layout: usLayout }, children: usRoutes, },me sale este error:
[Advertencia de Vue]: tipo de VNode no válido: indefinido (indefinido) en UsLayout en la App
Y no se muestra nada en la pantalla. ¿Alguna idea de qué significa este error / qué lo causa?
Tu problema es que estás usando div en is="div" . La directiva :is en el component solo acepta una definición de componente y no una etiqueta.
Con su código no es posible tener una representación directa del componente tal como está. Tendrá que envolverse en otro div o usar funciones de render :
<template> <div> <template v-if="layout === 'div'"> <router-view /> <template> <template v-else> <component :is="layout"> <router-view /> </component> </template> </div> </template> <script> computed: { layout() { let layout = null; for (const match of this.$route.matched) if (match.meta && match.meta.layout) layout = match.meta.layout; if (layout) return layout; return "div"; }, } </script>Con funciones de renderizado:
<script> computed: { layout() { let layout = null; for (const match of this.$route.matched) if (match.meta && match.meta.layout) layout = match.meta.layout; if (layout) return layout; return "div"; }, render(createElement) { return createElement(this.layout, [...]) } } </script>