Javascript 如何在Vue中用子管线组件替换父视图

我使用以下父路由和子路由设置了Vue路由：

{
    path: '/dashboard', component: dashboard,
    children: [
        {
            path:'report', component: report
        }
    ]
},

在父组件中，我有一些卡片菜单可以导航到子组件和路由器视图：

<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>

报告
报告犯罪或可疑活动

当我单击路由器链接时，它确实渲染子组件，但在父视图中

---

是否有一种方法可以将父视图完全替换为子路由，而不是渲染或附加到父路由？

我不确定这是否是正确的方法，但您可以使用v-if和此。$route.name来检查路由器名称并渲染要渲染的内容

例如，您的路由器将类似于：

{
路径：'/dashboard'，
名称：“仪表板”，
组件：仪表板，
儿童：[
{
路径：'报告'，
名称：“报告”，
构成部分：报告
}
]
},

您可以简单地检查您是否在父路线上：

将其作为单独的路线而不是子路线a我这样做了，但我计划添加一个面包屑菜单您是指面包屑导航还是URL？可能会有帮助的面包屑导航。因此，如果从父菜单中选择一个选项，它应该呈现vue组件并动态构建菜单