シーン:
これは、訪問する予定
/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>