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>

Ответы (0 шт):