【Vue】 vue-Router children 子组件空白显示,没有内容
场景:打算访问 /parent/child1 和/parent/child2,但产生问题是:子页面一直空白显示# route.js 产生问题示例{path: '/parent',children: [{path: 'child1',component: () => import('@/pages/network/child1'),},{path: 'child2',component: ()
·
场景:
打算访问
/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>
更多推荐
已为社区贡献7条内容
所有评论(0)