场景:
打算访问
/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>