点击不同页面时只显示undefined，页面无法切换

用以下代码时，切换页面会出错。TypeError: Cannot read properties of undefined (reading ‘__asyncLoader’)

'home': () => import('@c/Home.vue'),
'shopping':  () => import('@c/Shopping.vue'),
'my': () => import('@c/My.vue'),

是因为我用vue3的缘故？所以我引用了defineAsyncComponent，然后代码改成

'home': defineAsyncComponent (() =>  import('@c/Home.vue')),
'shopping': defineAsyncComponent (() =>  import('@c/Shopping.vue')),
'my': defineAsyncComponent (() =>  import('@c/My.vue')),

页面切换的时候就没有报错了，但还是显示undefined。请问老师是哪里出了问题呢？

Main.vue

ToolBar.vue

<template lang="">
    <div class="tool-bar">
        <!-- tab button，需要一个数据源来驱动此视图-->
        <div class="tool-bar-item" @click="onChangeFragment" v-for="(item, index) in toolBarData" :key="index">
            <!-- 当目前img标签的index===选中tab的index时，img显示高亮图片 -->
            <img class="tool-bar-item-img" :src="[index === selectItemIndex ? item.hIcon : item.nIcon]" />
            <!-- 当目前img标签的index===选中tab的index时，让p添加高亮状态的类-->
            <p class="tool-bar-item-name" :class="{ 'tool-bar-item-name-h': index === selectItemIndex }">{{ item.name }}</p>
        </div>
    </div>
</template>
<script>
/**
 * ToolBar功能
 * 1. 永远位于页面最底部
 * 2. 点击toolbar按钮时，页面发生相应的切换
 * 3. 按钮分为 默认 和选中 两个状态
 * 
 * -----------------
 * 功能和约束
 * 1. 不具备的能力（约束）
 * 2. 通过回调，通知父组件，按钮的点击事件
 * 3. 当按钮被选中，切换按钮状态
 */
export default {
    data: function () {
        return {
            // tab 按钮数据源
            toolBarData: [
                {
                    //默认状态下的图片
                    nIcon: require('@imgs/home-n.svg'),
                    //高亮状态下的图片
                    hIcon: require('@imgs/home-h.svg'),
                    // 名称
                    name: "首页",
                    // 需要展示的组件名称(不同的网页)
                    componentName: 'home'
                },
                {
                    //默认状态下的图片
                    nIcon: require('@imgs/shopping-n.svg'),
                    //高亮状态下的图片
                    hIcon: require('@imgs/shopping-h.svg'),
                    // 名称
                    name: "购物车",
                    // 需要展示的组件名称(不同的网页)
                    componentName: 'shopping'
                },
                {
                    //默认状态下的图片
                    nIcon: require('@imgs/my-n.svg'),
                    //高亮状态下的图片
                    hIcon: require('@imgs/my-h.svg'),
                    // 名称
                    name: "我的",
                    // 需要展示的组件名称(不同的网页)
                    componentName: 'my'
                }
            ],
            // 选中的tab button
            selectItemIndex: 0
        }
    },
    methods: {
        onChangeFragment: function(item, index){
            this.selectItemIndex = index;
            // 向父组件main.vue传递这个function
            this.$emit('onChangeFragment', item.componentName)
        }
    }
}
</script>