Vue router children display abnormally

 {
    
    
    path: '/home',
    component: () => import('../views/home/home.vue'),
    children: [
      {
    
    
        path: '',
        name: 'home',
        component: () => import('../views/home/home.vue'),
      },
      {
    
    
        path: 'sub',
        name: 'homeSub',
        component: () => import('../views/home/subpage.vue')
      }
    ]
  },

问题描述：

在项目中使用路由父子是嵌套时，路由不显示页面问题，

Solution:

1. Write in the parent route object

component: {
    
    render: (e) => e("router-view")},

2. Add the parent page to the vue page

  <router-view />

Routing code:

 {
    
    
    path: '/home',
    component: {
    
    render: (e) => e("router-view")},
    children: [
      {
    
    
        path: '',
        name: 'home',
        component: () => import('../views/home/home.vue'),
      },
      {
    
    
        path: 'sub',
        name: 'homeSub',
        component: () => import('../views/home/subpage.vue')
      }
    ]
  },

3. Perfect solution, sprinkle flowers ❀❀❀❀❀