Scenes:
It intends to visit
/parent/child1and/parent/child2, but the problem is: the child has a blank page display
# route.js 产生问题示例
{
path: '/parent',
children: [{
path: 'child1',
component: () => import('@/pages/network/child1'),
},{
path: 'child2',
component: () => import('@/pages/network/child2'),
},
]
},
Method 1: Modify route.js
Adding
component: { render: (e) => e("router-view") }
to the parent route is equivalent to adding to the parent page<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'),
},
]
},
Method 2: Modify the parent page
Write in the parent page
<router-view />, route.js does not need to be changed
#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>