vue二级路由和三级路由共用

目标：用/作为全站首页和父级路由 实现通过路由切换来渲染不同组件

问题：二级路由所在组件重复渲染 且与根路由的角色冲突

解决：把二级路由渲染首页的放上面 根路由配置放最下

{
  path: '/',
  name: 'Homepage',
  component: () => import('@/views/homepage/index.vue'),
  meta: {
    footer: 'homepage' // 底部导航
  },
  children: [
  {
    path: '',
    keepAlive: true,
    name: 'HomeGaokao',
    component: () => import('@/views/homepage/pages/gaokao.vue')
  },
  {
    path: 'art',
    keepAlive: true,
    name: 'HomeArt',
    component: () => import('@/views/homepage/pages/art.vue')
    }
  ]
},

全局根路由

  {
     path: '/',
     component: Layout,
     redirect: '/',
     meta: {
         footer: 'homepage' // 底部导航
     }
  },