【Vue】 vue-Router children 子组件空白显示，没有内容

场景：

打算访问 /parent/child1 和 /parent/child2 ，但产生问题是：子页面一直空白显示

# route.js 产生问题示例
{
    
    
   path: '/parent',
   children: [{
    
    
       path: 'child1',
       component: () => import('@/pages/network/child1'),
     },{
    
    
       path: 'child2',
       component: () => import('@/pages/network/child2'),
     },
   ]
 },

方法一： 修改route.js

在父路由中加入component: { render: (e) => e("router-view") }
等同于 在父页面 加入<router-view />

# route.js
{
    
    
      path: '/parent',
      component: {
    
     render: (e) => e("router-view") }, # 重点
      children: [{
    
    
          path: 'child1',
          component: () => import('@/pages/network/child1'),
        },{
    
    
          path: 'child2',
          component: () => import('@/pages/network/child2'),
        },
      ]
    },

方法二： 修改 父页面

在父页面写入 <router-view />， route.js 不用改变

#route.js
{
    
    
      path: '/parent',
      children: [{
    
    
          path: 'child1',
          component: () => import('@/pages/network/child1'),
        },{
    
    
          path: 'child2',
          component: () => import('@/pages/network/child2'),
        },
      ]
    },

# parent.vue
<template>
   <div id="parent">
	   <router-view />
   </div>
</template>