vue-router 訪問多層嵌套不能找到路徑

問題描述

使用了3層嵌套的路由，在頁面不能顯示出來。
訪問http://localhost:9527/#/foodMan/foodMainInfo/mainInfoSearch在頁面空白顯示

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

具體的文件路徑都是對的，也存在相應(yīng)的文件

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
vue-router:
{

path: '/foodMan',
component: Layout,
hidden: false,
name: '商品管理',
children: [
  {
    path: 'foodMainInfo',
    name: '商品主信息',
    meta: { title: '商品主信息', icon: 'icon', noCache: true },
    //component: () => import('@/views/foodMan/foodMainInfo/mainInfoSearch/index'),
    children: [
      {
        path: 'mainInfoSearch',
        component: () => import('@/views/foodMan/foodMainInfo/mainInfoSearch/index'),
        name: '商品主信息查詢',
        meta: { title: '商品主信息查詢', icon: 'icon', noCache: true }
      }, 
      {
        path: 'mainInfoKeep',
        component: () => import('@/views/foodMan/foodMainInfo/mainInfoKeep/index'),
        name: '商品主信息維護',
        meta: { title: '商品主信息維護', icon: 'icon', noCache: true }
      }, 
      {
        path: 'mainInfoAdd',
        component: () => import('@/views/foodMan/foodMainInfo/mainInfoAdd/index'),
        name: '商品主信息新增',
        meta: { title: '商品主信息新增', icon: 'icon', noCache: true }
      }
    ]
  }
]

},

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

可以訪問到正確地址。