vue配置了子路由，页面却没有显示

子路由不显示有两种情况

1、子路由的path配置有误如下

        
{
　path: 'reportFileIndex',
  component: () => import(/* webpackChunkName: "reportFile" */ '../views/manager/reportFile/Index.vue'),
  children: [
    { path: '', redirect: 'reportList' },
    { 
      path: '/reportList', 
      component: () => import(/* webpackChunkName: "ReportList" */ '../views/manager/reportFile/ReportList.vue'),
      meta: { keepAlive: true }
    },
  ]
}

配置后，当调用路由跳转方法this.$router.push({path: /reportFileIndex/reportList})子页面却空空如也，后来仔细翻看官方文档的路由配置说明，才了解配置问题，正确配置应该如下，去掉reportList前面的“/”

{
　path: 'reportFileIndex',
  component: () => import(/* webpackChunkName: "reportFile" */ '../views/manager/reportFile/Index.vue'),
  children: [
    { path: '', redirect: 'reportList' },
    { 
      path: 'reportList', 
      component: () => import(/* webpackChunkName: "ReportList" */ '../views/manager/reportFile/ReportList.vue'),
      meta: { keepAlive: true }
    },
  ]
}

2、本地访问子路由无误，打包上线有子路由无法访问，配置如下：

{
　path: 'reportFileIndex',
  component: () => import(/* webpackChunkName: "reportFile" */ '../views/manager/reportFile/Index.vue'),
  children: [
    { path: '', redirect: 'reportList' },
    { 
      path: 'reportList', 
      component: import(/* webpackChunkName: "ReportList" */ '../views/manager/reportFile/ReportList.vue'), // 没有用方法返回
      meta: { keepAlive: true }
    },
  ]
}

应修改为

{
　path: 'reportFileIndex',
  component: () => import(/* webpackChunkName: "reportFile" */ '../views/manager/reportFile/Index.vue'),
  children: [
    { path: '', redirect: 'reportList' },
    { 
      path: 'reportList', 
      component: () => import(/* webpackChunkName: "ReportList" */ '../views/manager/reportFile/ReportList.vue'), // 修改内容
      meta: { keepAlive: true }
    },
  ]
}