TypeScript + Vue CLI 3 динамический layout не работает
уважаемые Мегамозги! Я новичок в TypeScript. Вопрос для тех, кто пишет на Vue CLI 3+ TS. Я пытаюсь создать динамический layout, но в браузере появляется ошибка, а сам layout в console.log выходит правильно. Тот же подход отлично работает в JavaScript. P.s. И проверьте мой код, чтобы увидеть, правильно ли я пишу в целом. Я вижу других, классы и все такое. browser error Thanks a million!
You can download it here and see: https://github.com/Kalys01/kyrgyztest.kg
In src/App.vue
<template>
<div>
<TheUpNavBarVue />
<TheNavBar />
</div>
<component :is="layout">
<router-view />
</component>
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";
import TheNavBar from "./components/TheNavBar.vue";
import TheUpNavBarVue from "./components/TheUpNavBar.vue";
export default defineComponent({
name: 'app',
components: {
TheNavBar,
TheUpNavBarVue
},
computed: {
layout() {
const meta = this.$route.meta ?? {}
const layoutName = meta.layout ?? 'MainLayout';
console.log(layoutName);
return () => import(`@/layouts/${layoutName}.vue`);
}
}
})
</script>
<style>
</style>
In src/route/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue'),
meta: {layout: 'MainLayout'}
},
{
path: '/contact',
name: 'Contact',
component: () => import('../views/Contacts.vue'),
meta: {layout: 'EmptyLayout'}
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
In src/layouts/MainLayout.vue
<template>
<div class="flex bg-yellow-600 h-screen w-full px-10">
<slot />
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent ({
name: 'mainlayout',
})
</script>
<style lang="scss" scoped>
</style>