vue3+ts实现横向的一级菜单，点击一级菜单在左侧出现对应的二级菜单？

Question

子组件中的menuList是从父组件传过来的值

const props = defineProps({
    // 菜单列表
    menuList: {
        type: Array<RouteRecordRaw>,
        default: () => [],
    },
});
let {menuList} = toRefs(props)

子组件里面通过computed获取左侧菜单栏的路由

const menuLists = computed(() => {
    let obj = router.currentRoute.value.matched[0].children
    let routers = router.currentRoute.value.path.slice(0, router.currentRoute.value.path.lastIndexOf('/'))
    obj.map((value,index) => {
        if(value.path === routers) {
            console.log(obj[index].children);
            menuList.value = <RouteItems>obj[index].children
        }
    })
});

这个是我写的html

<el-menu
        router
        :default-active="state.defaultActive"
        background-color="transparent"
        :collapse="state.isCollapse"
        :unique-opened="getThemeConfig.isUniqueOpened"
        :collapse-transition="false"
    >
        <template v-for="val in menuLists">
            <el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
                <template #title>
                    <SvgIcon :name="val.meta.icon" />
                    <span>{{ $t(val.meta.title) }}</span>
                </template>
                <!-- <SubItem :chil="val.children" /> -->
            </el-sub-menu>
            <template v-else>
                <el-menu-item :index="val.path" :key="val.path">
                    <SvgIcon :name="val.meta.icon" />
                    <template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
                        <span>{{ $t(val.meta.title) }}</span>
                    </template>
                    <template #title v-else>
                        <a class="w100" @click.prevent="onALinkClick(val)">{{ $t(val.meta.title) }}</a>
                    </template>
                </el-menu-item>
            </template>
        </template>
    </el-menu>

ts报错
页面上 出不来这个菜单
功能：点击横向的一级菜单，然后在左侧出现对应一级菜单的二级菜单
我写了两个组件，一个组件是横向的一级菜单，只遍历了父级元素
还有一个组件就是左侧的二级菜单组件，也就是上面的html代码，也就是上面所说的子组件

// 这个是我写的路由
{
path: '/flow',
name: 'flow',
component: () => import('/@/layout/routerView/parent.vue'),
redirect: '/flow/flowStatistics',
meta: {
    title: 'message.router.flow',
    isLink: '',
    isHide: false,
    isKeepAlive: true,
    isAffix: false,
    isIframe: false,
    roles: ['admin', 'configurator', 'auditor'],
    icon: 'fa fa-globe',
},
children: [
    {
      path: '/flow/flowStatistics',
      name: 'flowStatistics',
      component: () => import('/@/views/flow/flowStatistics/index.vue'),
      meta: {
            title: 'message.router.flowStatisticsTitle',
            isLink: '',
            isHide: false,
            isKeepAlive: true,
            isAffix: false,
            isIframe: false,
            roles: ['admin', 'configurator', 'auditor'],
            icon: 'ele-Tickets',
      },
      children: []
    },
    {
      path: '/flow/flowList',
      name: 'flowList',
      component: () => import('/@/views/flow/flowList/index.vue'),
      meta: {
      title: 'message.router.flowListTitle',
      isLink: '',
      isHide: false,
      isKeepAlive: true,
      isAffix: false,
      isIframe: false,
      roles: ['admin', 'configurator', 'auditor'],
      icon: 'fa fa-list-ul',
      },
      children: []
    },
    ]
},

不知道是哪里出错了，那我大神帮我看一下问题?

Answer 1

ts中空数组被认定为never类型，可以给children设定一个具体类型children: Array<Menu>,这里的Menu跟每一项类型一致

Answer 2

menuLists 没有return