【无标题】Uncaught (in promise) Error: Invalid route component

Uncaught (in promise) Error: Invalid route component

[Vue Router warn]: Component “default” in record with path “/vppz” is not a valid component. Received “undefined”.

const routes = [
    { 
      path: '/',
      component: Layout,
      name: 'main',
      children: [
        {
          path: 'dashboard',
          meta: { id: '1', name: '控制台', icon: 'Platform', path: '/dashboard', describe: '用于展示当前系统中的统计数据、统计报表及重要实时数据' },
          component: Dashboard
        },
        {
          path: 'auth',
          meta: { id: '2' ,name: '权限管理', icon: 'Grid' },
          children: [
            {
              path: '',
              alias: ['admin'],
              meta: { id: '1', name: '账号管理', icon: 'Avatar', path: '/auth/admin', describe: '管理员可以进行编辑，权限修改后需要登出才会生效' },
              component: Admin
            },
            {
              path: 'group',
              meta: { id: '2', name: '菜单管理', icon: 'Menu', path: '/auth/group', describe: '菜单规则通常对应一个控制器的方法,同时菜单栏数据也从规则中获取' },
              component: Group
            }
          ]
        },
        {
          path: 'vppz',
          meta: { id: '3', name: 'DIDI陪诊', icon: 'BellFilled' },
          children: [
            {
              path: '',
              alias: ['staff'],
              meta: { id: '1', name: '陪护管理', icon: 'Checked', path: '/vppz/staff', describe: '陪护师可以进行创建和修改，设置对应生效状态控制C端选择' },
              component: Staff
            },
            {
              path: 'order',
              meta: { id: '2', name: '订单管理', icon: 'List', path: '/vppz/order', describe: 'C端下单后可以查看所有订单状态，已支付的订单可以完成陪护状态修改' },
              component: Order
            }
          ]
        }
      ]
    },
    {
      path: '/login',
      component: Login
    },
]

<script setup>

  import { useRouter } from 'vue-router'

  // 创建router实例
  const router = useRouter()
  const props = defineProps(['menuData', 'index'])
  // console.log(props);
  const handleClick = (item, active) => {
    router.push(item.meta.path)
  }
  
</script>

在调用以上router.push的时候报错

解决方法：在二级目录（auth和vppz）的位置增加component属性

const routes = [
    { 
      path: '/',
      component: Layout,
      name: 'main',
      children: [
        {
          path: 'dashboard',
          meta: { id: '1', name: '控制台', icon: 'Platform', path: '/dashboard', describe: '用于展示当前系统中的统计数据、统计报表及重要实时数据' },
          component: Dashboard
        },
        {
          path: 'auth',
          meta: { id: '2' ,name: '权限管理', icon: 'Grid' },
          component: Layout,
          children: [
            {
              path: '',
              alias: ['admin'],
              meta: { id: '1', name: '账号管理', icon: 'Avatar', path: '/auth/admin', describe: '管理员可以进行编辑，权限修改后需要登出才会生效' },
              component: Admin
            },
            {
              path: 'group',
              meta: { id: '2', name: '菜单管理', icon: 'Menu', path: '/auth/group', describe: '菜单规则通常对应一个控制器的方法,同时菜单栏数据也从规则中获取' },
              component: Group
            }
          ]
        },
        {
          path: 'vppz',
          meta: { id: '3', name: 'DIDI陪诊', icon: 'BellFilled' },
          component: Layout,
          children: [
            {
              path: '',
              alias: ['staff'],
              meta: { id: '1', name: '陪护管理', icon: 'Checked', path: '/vppz/staff', describe: '陪护师可以进行创建和修改，设置对应生效状态控制C端选择' },
              component: Staff
            },
            {
              path: 'order',
              meta: { id: '2', name: '订单管理', icon: 'List', path: '/vppz/order', describe: 'C端下单后可以查看所有订单状态，已支付的订单可以完成陪护状态修改' },
              component: Order
            }
          ]
        }
      ]
    },
    {
      path: '/login',
      component: Login
    },
]

查了一下按理说这里不应该是必须要component的，但是没有我就报错了，应该是哪里配置出问题了。

继续学习!