[Vue] vueの子コンポーネント-ルーターの子は空白で、コンテンツがありません

シーン:

これは、訪問する予定/parent/child1/parent/child2が、問題がある:子供は空白のページ表示を持っています

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

方法1: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'),
        },
      ]
    },

方法2:親ページを変更する

親ページ<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>

おすすめ

転載: blog.csdn.net/qq_22227087/article/details/109002372