我有一个 Vue 路由设置,包含以下父路由和子路由:
{
path: '/dashboard', component: dashboard,
children: [
{
path:'report', component: report
}
]
},
在父组件中,我有一些卡片菜单可以导航到子组件,还有一个路由器 View :
<template>
<div class="container mt-5">
<div class="row mt-0 h-100">
<!-- menu item-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 my-auto" id="report-card">
<router-link to="/dashboard/report" class="card2">
<div class="d-flex flex-column justify-content-center">
<div class="card-icon p-3">
<img :src="icons[0]"/>
</div>
<h3>Make a Report</h3>
<p class="small">Make a report of a crime or suspicious activities</p>
</div>
</router-link>
</div>
</div>
<router-view></router-view>
</div>
</template>
当我点击路由器链接时,它确实呈现子组件,但在父 View 中。
有没有一种方法可以用子路由完全替换父 View ,而不是渲染或附加到父 View ?
最佳答案
我不确定这是否是正确的方法,但您可以将 v-if 与 this.$route.name 一起使用来检查路由器名称并渲染您想要渲染的内容。
例如你的路由器会是这样的:
{
path: '/dashboard',
name: "Dashboard",
component: dashboard,
children: [
{
path:'report',
name: "Report",
component: report
}
]
},
你可以像这样简单地检查你是否在父路由上:
<template>
<div>
<div v-if="this.$route.name === 'Dashboard' ">
<!-- your homepage component -->
</div>
<router-view></router-view>
</div>
</template>
关于javascript - Vue中如何用子路由组件替换父 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64558462/