兄弟，计算不会为你工作，因为webpack导入不能计算 meta布局？？并进行导入。要解决这个问题，使一个单独的变量布局。类似的东西：

layout(): ILayout {
  const { meta } = useRoute();
  const layoutName: TLayout = meta.layout ?? 'DefaultLayout';
  return defineAsyncComponent(
    () =>
      import(/* webpackChunkName: 'Layout' */ `@/layouts/${layoutName}.vue`)
  );
}

别在意语法，我用的是 typescript 。

首先，你不应该在一个计算函数中调用useRoute。你应该在设置层调用它。所以你的代码应该是：

<script lang="ts">
import { computed, defineAsyncComponent, defineComponent } from "vue"
import { useRoute } from "vue-router"

export default defineComponent({
  setup() {
    const route = useRoute()
    const layout_component = computed(() => {
      const layout = route.meta.layout ?? "default"
      return defineAsyncComponent(() => import(`@/layouts/${layout}.vue`))
    })
    return { layout_component }
  },
})
</script>

<template>
  <component :is="layout_component">
    <router-view />
  </component>
</template>

现在，这种方法是可行的，但它会导致<component>在每次页面更改时重新呈现，这是因为route.meta更改为新路由的 meta，并且defineAsyncComponent每次都返回一个新组件（实际上，即使您以某种方式缓存它，<component>仍然会重新呈现，因为它检测到它的依赖关系已经被重新计算-即使是相同的值）。
使用显式watch而不是computed效果更好：

<script lang="ts">
import {
  Component,
  defineAsyncComponent,
  defineComponent,
  shallowRef,
  watch,
} from "vue"
import { useRoute } from "vue-router"

export default defineComponent({
  setup() {
    const route = useRoute()
    const layout_component = shallowRef<Component>()
    watch(
      () => route.meta.layout ?? "default",
      layout => {
        layout_component.value = defineAsyncComponent(() =>
          import(`@/layouts/${layout}.vue`),
        )
      },
      { immediate: true },
    )
    return { layout_component }
  },
})
</script>

<template>
  <component :is="layout_component">
    <router-view />
  </component>
</template>

这样，如果布局没有更改，则在页面更改时不会重新呈现布局组件。