Nuevo en Vue y Vite, pero tratando de que los diseños dinámicos funcionen correctamente aquí. Creo que tengo lo que se necesita, pero el problema es que el meta siempre aparece como un objeto vacío o undefined .
AppLayout.vue
<script setup lang="ts"> import AppLayoutDefault from './stub/AppLayoutDefault.vue' import { markRaw, watch } from 'vue' import { useRoute } from 'vue-router' const layout = markRaw(AppLayoutDefault) const route = useRoute() console.log('Current path: ', route.path) console.log('Route meta:', route.meta) watch( () => route.meta, async (meta) => { try { const component = await import(`./stub/${meta.layout}.vue`) layout.value = component?.default || AppLayoutDefault } catch (e) { layout.value = AppLayoutDefault } }, { immediate: true } ) </script> <template> <component :is="layout"> <router-view /> </component> </template>aplicación.vue
<script setup lang="ts"> import AppLayout from '@/layouts/AppLayout.vue' </script> <template> <AppLayout> <router-view /> </AppLayout> </template> Todas y cada una de las rutas tienen el metaconjunto apropiado con una propiedad llamada layout .
Parece que no puedo aplicar el diseño correctamente en la primera carga o cualquier clic de un enlace en la barra de navegación (que son solo enlaces de enrutador) para el caso.
El problema principal es que el layout se inicializa como markRaw() , que no es una ref reactiva:
const layout = markRaw(AppLayoutDefault) // ❌ not reactivelayout como una ref .route completo, observe route.meta?.layout porque ese es el único campo relevante para el controlador.layout con markRaw() para evitar la reactividad en la definición del componente. const layout = ref() 1️⃣ watch( () => route.meta?.layout as string | undefined, 2️⃣ async (metaLayout) => { try { const component = metaLayout && await import(/* @vite-ignore */ `./${metaLayout}.vue`) layout.value = markRaw(component?.default || AppLayoutDefault) 3️⃣ } catch (e) { layout.value = markRaw(AppLayoutDefault) 3️⃣ } }, { immediate: true } )